Надпись за курсором мыши
Взгляните на код, а далее мы разберём его на части:
<html;> <head;> <style;> .spanstyle { position:absolute; visibility:visible; top:-50px; font-size:8pt; font-family:Verdana; font-weight:bold; color:#ff0000; } </style> <script; language="JavaScript"> <!-- var x,y var step=10 var flag=0 var message="JavaPortal!!!" message=message.split("") var xpos=new Array() var ypos=new Array() for (i=0;i<=message.length;i++) { xpos[i]=-50 ypos[i]=-50 } function handlerMM(e) { x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY flag=1 } function makesnake() { if (flag==1 && document.all) { for (i=message.length; i>=1; i--) { xpos[i]=xpos[i-1]+step ypos[i]=ypos[i-1] } xpos[0]=x+step ypos[0]=y for (i=0; i<message.length; i++) { var thisspan = eval("span"+(i)+".style") thisspan.posLeft=xpos[i] thisspan.posTop=ypos[i] } } else if (flag==1 && document.layers) { for (i=message.length; i>=1; i--) { xpos[i]=xpos[i-1]+step ypos[i]=ypos[i-1] } xpos[0]=x+step ypos[0]=y for (i=0; i<message.length; i++) { var thisspan=eval("document.span"+i) thisspan.left=xpos[i] thisspan.top=ypos[i] } } var timer=setTimeout("makesnake()",30) } for (i=0;i<=message.length;i++) { document.write("<span; id='span"+i+"' class='spanstyle'>") document.write(message[i]) document.write("</span>") } if (document.layers){document.captureEvents(Event.MOUSEMOVE);} document.onmousemove=handlerMM; //--> </script> </head> <body; onLoad="makesnake()"> </body> </html>Первое что можно отметить, это содержимое между тегами <style;> и </style>
.spanstyle { position:absolute; visibility:visible; top:-50px; font-size:8pt; font-family:Verdana; font-weight:bold; color:#ff0000; } </style>
Здесь мы указываем стиль структуры в которой будем выводить надпись.
position:absolute - позиционирование;
visibility:visible - видимость;
top:-50px - положение по высоте;
font-size:8pt - размер шрифта;
font-family:Verdana - сам шрифт;
font-weight:bold - начертание;
color:#ff0000 - цвет.
Сюда можно добавить и многое другое, зависит от вашей фантазии.
Далее начинается сам скрипт заключенный между тегами <script; language="JavaScript"> и </script>.
<script; language="JavaScript"> <!--
Объявляем переменные:
var x,y var step=10 var flag=0 var message="JavaPortal!!!" var xpos=new Array() var ypos=new Array()var x,y -переменные хранят координаты курсора мыши;
var step=10 - расстаяние между символами в надписи;
var flag=0 - флаг - используется далее в скрипте для определения произошло событие или нет;
var message="JavaPortal!!!" - надпись выводимая за курсором мыши;
var xpos=new Array() - массив содержащий x-координаты символов;
var ypos=new Array() - массив содержащий y-координаты символов.
Разбиваем надпись на массив символов:
message=message.split("")
Инициализируем все x и y координаты числом -50, для того чтобы изначально не было видно надписи:
for (i=0;i<=message.length;i++) { xpos[i]=-50 ypos[i]=-50 }
Объявляем функцию обрабатывающею события от мышки.
function handlerMM(e) { x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY flag=1 }
Объявляем функцию реализующею весь алгоритм прорисовки символов.
function makesnake() {
Здесь функция разделяется на два блока оператором if (в зависимости от структуры документа)
if (flag==1 && document.all) {
Меняем все (кроме начальных) рядом стоящие x-координаты и сдвигаем их на шаг step, так же меняем рядом стоящие y-координаты местами.
for (i=message.length; i>=1; i--) { xpos[i]=xpos[i-1]+step ypos[i]=ypos[i-1] }
Начальную x-координату приравниваем x-координате курсора мышки со здвигом на шаг step, а начальную y-координату просто приравниваем y-координате курсора мышки.
xpos[0]=x+step ypos[0]=y
Тут получаем каждую структуру в переменную thisspan и сдвигаем её в указанные координаты.
for (i=0; i<message.length; i++) { var thisspan = eval("span"+(i)+".style") thisspan.posLeft=xpos[i] thisspan.posTop=ypos[i] } }
В этом блоке всё то же самое за исключением метода получения структуры.
else if (flag==1 && document.layers) { for (i=message.length; i>=1; i--) { xpos[i]=xpos[i-1]+step ypos[i]=ypos[i-1] } xpos[0]=x+step ypos[0]=y for (i=0; i<message.length; i++) { var thisspan=eval("document.span"+i) thisspan.left=xpos[i] thisspan.top=ypos[i] } }
Повторяем функцию makesnake() каждые 30 мсек.
var timer=setTimeout("makesnake()",30) }
Выводим символы.
for (i=0;i<=message.length;i++) { document.write("<span; id='span"+i+"' class='spanstyle'>") document.write(message[i]) document.write("</span>") }
Устанавливаем обработчик машки.
if (document.layers){document.captureEvents(Event.MOUSEMOVE);} document.onmousemove=handlerMM; //--> </script> </head>
При загрузке выполняем функцию makesnake().
<body; onLoad="makesnake()"> </body> </html>
ВСЁ