Курсор с эффектами









Здравствуйте уважаемые веб-мастера.

Курсор с эффектом гарантированно выделит ваш сайт из миллионов других сайтов.

Скрипт имеет простые настройки с широкими возможностями.

Например, вместо элемента <hr> можно вставить любые картинки. Можно изменить число элементов и расстояние между ними.

Огромный простор для экспериментов со стилевым оформлением шлейфа.

В общем — дерзайте и делайте Ваш сайт неповторимым.

Код:

HTML


<div style="z-index:1"> <!--z-index задаётся всему коду-->
<div id="adot0" style="position: absolute; visibility: hidden; left: 0px; top: 0px;"><hr style="width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle, white, red 40%);"></div>
<div id="adot1" style="position: absolute; left: 892px; top: 340.011px;"><hr style="width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle, white, red 40%);"></div>
<div id="adot2" style="position: absolute; left: 892px; top: 375.028px;"><hr style="width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle, white, red 40%);"></div>
<div id="adot3" style="position: absolute; left: 892px; top: 405.045px;"><hr style="width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, white, red 40%);"></div>
<div id="adot4" style="position: absolute; left: 892px; top: 430.052px;"><hr style="width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle, white, red 40%);"></div>
<div id="adot5" style="position: absolute; left: 892px; top: 450.058px;"><hr style="width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle, white, red 40%);"></div>
<div id="adot6" style="position: absolute; left: 892px; top: 465.068px;"><hr style="width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle, white, red 40%);"></div>
<div id="adot7" style="position: absolute; left: 892px; top: 480.058px;"><hr style="width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, white, red 40%);"></div>
<div id="adot8" style="position: absolute; left: 892px; top: 500.068px;"><hr style="width: 15px; height: 15px; border-radius: 50%; background: radial-gradient(circle, white, red 40%);"></div>

Javascript


<script>

var nDots = 9; // Число элементов шлейфа +1
var Xbpos = 0;
var Ybpos = 0;

var DELTAT = .01;
var SEGLEN = 10;
var SPRINGK = 10;
var MASS = 1;
var XGRAVITY = 0;
var YGRAVITY = 50;
var RESISTANCE = 10;
var STOPVEL = 0.1;
var STOPACC = 0.1;
var DOTSIZE = 11;
var BOUNCE = 0.75;
var followmouse = true;
var dots = new Array();

init();

function init()
{
var i = 0;
for (i = 0; i < nDots; i++) { dots[i] = new dot(i); } for (i = 0; i < nDots; i++) { dots[i].obj.left = dots[i].X + "px"; dots[i].obj.top = dots[i].Y + "px"; } setTimeout("startanimate()", 10); } function dot(i)
{
this.X = Xbpos;
this.Y = Ybpos;
this.dx = 0;
this.dy = 0;

var id = "adot" + i;
var elem = document.getElementById(id);
this.obj = elem.style;
}

function startanimate()
{
setInterval("animate()", 20);
}

function setInitPositions(dots)
{
var startloc = document.all.tags("Li");
var i = 0;
for (i = 0; i < startloc.length && i < (nDots - 1); i++) { dots[i+1].X = startloc[i].offsetLeft + startloc[i].offsetParent.offsetLeft - DOTSIZE; dots[i+1].Y = startloc[i].offsetTop + startloc[i].offsetParent.offsetTop + 2*DOTSIZE; } dots[0].X = dots[1].X; dots[0].Y = dots[1].Y - SEGLEN; } function MoveHandler(e)
{
if (window.event)
{
Xbpos = window.event.x + document.body.scrollLeft;
Ybpos = window.event.y + document.body.scrollTop;
}
else
{
Xbpos = e.pageX;
Ybpos = e.pageY;
return true;
}
}

document.onmousemove = MoveHandler;

function vec(X, Y)
{
this.X = X;
this.Y = Y;
}

function springForce(i, j, spring)
{
var dx = (dots[i].X - dots[j].X);
var dy = (dots[i].Y - dots[j].Y);
var len = Math.sqrt(dx*dx + dy*dy);
if (len > SEGLEN)
{
var springF = SPRINGK * (len - SEGLEN);
spring.X += (dx / len) * springF;
spring.Y += (dy / len) * springF;
}
}

function animate()
{
var start = 0;
if (followmouse)
{
dots[0].X = Xbpos;
dots[0].Y = Ybpos;
start = 1;
}

for (i = start ; i < nDots; i++ ) { var spring = new vec(0, 0); if (i > 0)
{
springForce(i-1, i, spring);
}
if (i < (nDots - 1)) { springForce(i+1, i, spring); } var resist = new vec(-dots[i].dx * RESISTANCE, -dots[i].dy * RESISTANCE);
var accel = new vec((spring.X + resist.X)/MASS + XGRAVITY, (spring.Y + resist.Y)/ MASS + YGRAVITY);

dots[i].dx += (DELTAT * accel.X);
dots[i].dy += (DELTAT * accel.Y);

if (Math.abs(dots[i].dx) < STOPVEL && Math.abs(dots[i].dy) < STOPVEL && Math.abs(accel.X) < STOPACC && Math.abs(accel.Y) < STOPACC) { dots[i].dx = 0; dots[i].dy = 0; } dots[i].X += dots[i].dx; dots[i].Y += dots[i].dy; var height, width;

if (typeof window.innerWidth != 'undefined')
{
width = window.innerWidth + window.pageXOffset;
height = window.innerHeight + window.pageYOffset;
}
else
if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0)
{
width = document.documentElement.clientWidth + document.body.scrollLeft;
height = document.documentElement.clientHeight + document.body.scrollTop;
}
else
{
width = document.getElementsByTagName('body')[0].clientWidth + document.body.scrollLeft;
height = document.getElementsByTagName('body')[0].clientHeight + document.body.scrollTop;
}

if (dots[i].Y >= height - DOTSIZE - 1)
{
if (dots[i].dy > 0)
{
dots[i].dy = BOUNCE * -dots[i].dy;
}
dots[i].Y = height - DOTSIZE - 1;
}
if (dots[i].X >= width - DOTSIZE)
{
if (dots[i].dx > 0)
{
dots[i].dx = BOUNCE * -dots[i].dx;
}
dots[i].X = width - DOTSIZE - 1;
}
if (dots[i].X < 0) { if (dots[i].dx < 0) { dots[i].dx = BOUNCE * -dots[i].dx; } dots[i].X = 0; } dots[i].obj.left = dots[i].X + "px"; dots[i].obj.top = dots[i].Y + "px"; } } </script>
</div>

Желаю творческих успехов.

В раздел >>>

Рекомендую: Готовые HTML шаблоны на русском

Запись опубликована в рубрике Уроки javascript и jQuery. Добавьте в закладки постоянную ссылку.
А так же:

8 комментариев на «Курсор с эффектами»

  1. stariс говорит:

    Я не про браузер. Ладно, давайте так — куда вы вставляете код скрипта, прежде чем открыть его в браузере — в редактор, CMS, песочницу?
    Завтра ещё раз отправлю код на вашу почту. Возможно что-то на странице надо поправить, так как разик переделывал, но сейчас совсем нет времени в этом ковырятся.
    Файл с кодом сделаю в блокноте винды, чтоб уж точно открылся

  2. Anton говорит:

    > Я же дал на почту работающий код. Зачем что-то подсовывать.
    Странно, я ничего не получил…

    >3. Браузер легко проверить. Откройте страницу моего сайта.
    >Если работает — всё нормально.
    >Вы какую программу используете для запуска скрипта?
    Ну, я использую в основном Mozilly Firefox, но и в IE пытался открыть файл и в Safari и в Хроме…
    Нигде не работает…
    Может, загрузку скрипта надо к какому-то событию прикрутить?

    Только что проверил на всякий случай — в IE тоже работает, хоть и притормаживает чуть-чуть.

  3. stariс говорит:

    1. За угловую скобку большое спасибо. Это чисто небрежно выполненная подсветка кода.

    2. Я же дал на почту работающий код. Зачем что-то подсовывать.

    3. Браузер легко проверить. Откройте страницу моего сайта. Если работает — всё нормально. Вы какую программу используете для запуска скрипта?

    Только что проверил на всякий случай — в IE тоже работает, хоть и притормаживает чуть-чуть.

  4. Anton говорит:

    Сомнительными представляются 1-я строчка (слово script) с двумя закрывающими символами «>»
    и последний тег — /div.
    Что это? Небрежное вырезание js-кода из исходника? 🙁

    М.б. надо в body onload=» » подсунуть какую-то функцию?
    М.б. у меня вообще во всех браузерах тупо запрещено выполнение js-скриптов?
    Как это проверить в IE и MzFrx?

  5. stariс говорит:

    попробуйте убрать межстрочные пробелы в js коде. Попробуйте вставить js непосредственно в html документ.

  6. Anton говорит:

    Я только-только приступил к изучению JS и не могу понять, что надо сделать, чтобы скрипт заработал.
    Я вынес его в отдельный файл с расширением js. Далее в заголовке html-документа я его подключил:

    В тело html-документа (…) я вставил HTML-код, приведённый выше ( и т.д. до конца).

    Открываю страничку в браузере и… ничего не происходит. По середине экрана висит какая-то «сопля» и всё.

  7. stariс говорит:

    Спасибо!

  8. Imapo говорит:

    Если прокручивать страницу — висюльки останутся наверху. Фиксится вот так:

    1. Находим в скрипте строчку Ybpos = window.event.y + document.body.scrollTop;
    2. Заменяем на: Ybpos = window.event.y + document.body.scrollTop + window.pageYOffset;

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *