Курсор с хвостом для сайта вебмастера
Курсор с хвостом
Курсор с ярким извивающимся хвостом, это то, что заметит каждый посетитель Вашего сайта.
По этой ссылке Вы можете посмотреть, как выглядnт в работе один из таких нестандартных курсоров с хвостом: http://enigma.nanoquant.ru/demo-script/cursor/demo-cursor4.html.
А здесь ниже имеется инструкция по установке и коды, которые нужно скопировать на свой сайт, если Вы хотите, чтобы на Вашем сайте тоже был запоминающийся курсор с хвостом.
Вот этот код нужно не просто поместить между тегами body, а поместить его сразу же после открывающегося тега body. То есть между открывающимся тегом body и этим кодом ничего не должно быть лишнего.
|
<script> A=document.getElementById B=document.all; C=document.layers; T1=new Array("trail1.gif",38,35, "trail2.gif",30,31, "trail3.gif",28,26, "trail4.gif",22,21, "trail5.gif",16,16, "trail6.gif",10,10) var offsetx=15 //отступ по горизонтали var offsety=10 //отступ по вертикали nos=parseInt(T1.length/3) rate=50 ie5fix1=0; ie5fix2=0; rightedge=B? document.body.clientWidth-T1[1] : window.innerWidth-T1[1]-20 bottomedge=B? document.body.scrollTop+document.body.clientHeight-T1[2] : window.pageYOffset+window.innerHeight-T1[2] for (i=0;i createContainer("CUR"+i,i*10,i*10,i*3+1,i*3+2,"","<img src='"+T1[i*3]+"' width="+T1[(i*3+1)]+" height="+T1[(i*3+2)]+" border=0>") } function createContainer(N,Xp,Yp,W,H,At,HT,Op,St){ with (document){ write((!A && !B) ? "<layer id='"+N+"' left="+Xp+" top="+Yp+" width="+W+" height="+H : "<div id='"+N+"'"+" style='position:absolute;left:"+Xp+"; top:"+Yp+"; width:"+W+"; height:"+H+"; "); if(St){ if (C) write(" style='"); write(St+";' ") } else write((A || B)?"'":""); write((At)? At+">" : ">"); write((HT) ? HT : ""); if (!Op) closeContainer(N) } } function closeContainer(){ document.write((A || B)?"</div>":"</layer>") } function getXpos(N){ if (A) return parseInt(document.getElementById(N).style.left) else if (B) return parseInt(B[N].style.left) else return C[N].left } function getYpos(N){ if (A) return parseInt(document.getElementById(N).style.top) else if (B) return parseInt(B[N].style.top) else return C[N].top } function moveContainer(N,DX,DY){ c=(A)? document.getElementById(N).style : (B)? B[N].style : (C)? C[N] : ""; if (!B){ rightedge=window.innerWidth-T1[1]-20 bottomedge=window.pageYOffset+window.innerHeight-T1[2] } c.left=Math.min(rightedge, DX+offsetx) + 'px'; c.top=Math.min(bottomedge, DY+offsety) + 'px'; } function cycle(){ //if (IE5) if (document.all&&window.print){ ie5fix1=document.body.scrollLeft; ie5fix2=document.body.scrollTop; } for (i=0;i<(nos-1);i++){ moveContainer("CUR"+i,getXpos("CUR"+(i+1)),getYpos("CUR"+(i+1))) } } function newPos(e){ moveContainer("CUR"+(nos-1),(B)?event.clientX+ie5fix1:e.pageX+2,(B)?event.clientY+ie5fix2:e.pageY+2) } function getedgesIE(){ rightedge=document.body.clientWidth-T1[1] bottomedge=document.body.scrollHeight-T1[2] } if (B){ window.onload=getedgesIE window.onresize=getedgesIE } if(document.layers) document.captureEvents(Event.MOUSEMOVE) document.onmousemove=newPos setInterval("cycle()",rate) </script> |
Элементы хвоста, применяемые в демонстрации работы скрипта по ссылке вверху, можно скачать с этим архивом: trail.zip. Картинки из этого архива должны находиться в той же папке, что и вебстраница с хвостатым курсором. Вы можете заменить эти картинки на свои.
Если Вы хотите настроить изображения, используемые для хвоста, то все необходимые изменения нужно сделать в массиве T1. Первый параметр этого массива ссылается имя файла изображения. Второй и третий параметры массива T1 задают размеры элемента хвоста.
Массив T1 начинается с самого последнего элемента хвоста и заканчивается параметрами самого первого элемента хвоста (который ближе всего к курсору). Первое число после имени файла рисунка задает размер элемента хвоста по горизонтали. А второе число задает размер элемента хвоста по вертикали.
В коде массив T1 регулирует изображения и размеры шести элементов хвоста (как на странице с демонстрацией). Но Вы можете сделать хвост курсора с большим или с меньшим числом элементов, добавив или уменьшив число элементов в этом массиве.
Параметры offsetx и offsety задают отступы элементов хвоста друг от друга по горизонтали и по вертикали, соответственно. С помощью этих параметров можно менять угол наклона хвоста. А также можно растягивать хвост без увеличения в нем числа его элементов, то есть разреживая его, и укорачивать его с уплотнением расположения элементов. При уплотнении хвоста, элементы, расположенные ближе к курсору начнут частично закрывать собой элементы, расположенные ближе к концу хвоста.
Таким образом, массив T1 и параметры offsetx и offsety позволяют Вам сделать хвост своего курсора любого вида, любого размера и любой длины.
Внимание! Если эти коды копируются из Вашего браузера в Вашу веб-страницу неправильно, то нужно их сначала скопировать в какой-нибудь самый простой текстовый редактор, например, в Блокнот. А уже потом оттуда их скопировать на свою веб-страницу.
с вложениями денег:
без вложений денег:
для тех у кого нет сайта
заработки на сайте
с учебниками
Скорее КинжЛог!
Microsoft Word вер.10