Логин:   Пароль:






Новости
Рассылки
Форум
Поиск


Java
- Апплеты
- Вопрос-ответ
- Классы
- Примеры
- Руководства
- Статьи
- IDE
- Словарь терминов
- Скачать

Мобильная Java
- Игры
- Примеры
- Статьи
- WAP, WML и пр.

JavaScript
- Вопрос-ответ
- Примеры
- Статьи

Веб-мастеринг
- HTML
- CSS
- SSI

Разминка для ума
Проекты
Книги
Ссылки
Программы
Юмор :)




Rambler's Top100
Rambler's Top100

JavaScript: ПримерыНадпись за курсором мыши

Надпись за курсором мыши

Взгляните на код, а далее мы разберём его на части:


<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>

ВСЁ


Warning: mysql_connect() [function.mysql-connect]: Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2) in /pub/home/javaport/javaportal/books/show2b.php on line 11

Warning: mysql_db_query() [function.mysql-db-query]: Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2) in /pub/home/javaport/javaportal/books/show2b.php on line 19

Warning: mysql_db_query() [function.mysql-db-query]: A link to the server could not be established in /pub/home/javaport/javaportal/books/show2b.php on line 19

Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in /pub/home/javaport/javaportal/books/show2b.php on line 30
Узнай о чем ты на самом деле сейчас думаешь тут.


[an error occurred while processing this directive]



Warning: mysql_connect() [function.mysql-connect]: Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2) in /pub/home/javaport/javaportal/news/worldnews.php on line 91

Warning: mysql_db_query() [function.mysql-db-query]: Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2) in /pub/home/javaport/javaportal/news/worldnews.php on line 93

Warning: mysql_db_query() [function.mysql-db-query]: A link to the server could not be established in /pub/home/javaport/javaportal/news/worldnews.php on line 93

Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in /pub/home/javaport/javaportal/news/worldnews.php on line 95