На главную
Новости
Рейтинг
Каталог
Статьи
Графика
Веб инструменты
|
||
|
||
|
|
|
|
Webobzor.net -> Статьи -> Java Script
Прыгающие буквы на JavaScript06.02.2007 01:07В данной статье представлено описание интересного эффекта "прагающих букв", который был позаимствован из одного флэш ролика и переписан на JavaScript. Эффект заключается в том, что при наведении на одну из букв текста, она подпрагивает вверх и возвращается на свое место. Если вы читали наши предыдущие статьи (например, Эффект света при помощи JavaScript), разобраться в данном скрипте вам не составит ни малейшего труда. Но наиболее важные моменты все же стоит описать подробнее. Код скрипта: <style> .txt { font-size: 15px; font-weight: bold; font-family: arial; cursor: pointer } </style> <script language=JavaScript> var m = new Array(); var f = new Array(); var tt = new Array(); var tt2 = new Array(); var topic = 16; var step = 5; function upwards(q) { if ((m[q] > 2) && (f[q] == 0)) { m[q]--; document.getElementById("s"+q).style.paddingTop = m[q]; document.getElementById("s"+q).style.color = "#AA0000"; tt[q] = setTimeout("upwards("+q+")",step); } if (m[q]==2) { clearTimeout(tt[q]); f[q]=1; downward(q) } } function downward(q) { if ((m[q]<topic) && (f[q] == 1)) { m[q]+=1; document.getElementById("s"+q).style.paddingTop = m[q]; tt2[q] = setTimeout("downward("+q+")",step); } if (m[q]==topic) { clearTimeout(tt[q]); document.getElementById("s"+q).style.color = "#000000" } }; function getText(text) { document.write("<table cellpadding='0' cellspacing='0' align='left'><tr>"); for (i=0; i < text.length; i++) { sym = text.charAt(i); if (sym == ' ') sym = " "; document.write("<td><div id='s"+i+"' class='txt' style='padding-top: "+topic+"px' onmouseover='f["+i+"]=0; upwards("+i+")'>"+sym+"</div>"); m[i] = topic; f[i] = 0; } document.write("</tr></table>"); } getText('Hello world. Created by Alex Nikolenko'); </script> Вывод текста осуществляется при помощи функции getText, которой передается собственно сам текст. Функция преобразует каждую букву текста в объект div, которому присваивает уникальное имя (s1, s2, s3...) При наведении на div запускается функция upwards: onmouseover='f["+i+"]=0; upwards("+i+")'>" Функции upwords и downward отвечаю за перемещение буквы вверх и возврат ее в исходной состоянии. Перемещение буквы осуществляется при помощи изменения ее padding-top (отсупа от верхнего края): document.getElementById("s"+q).style.paddingTop При это когда функция достигает пика, выполнение функции upwards останавливается и запускается функция downward, опускающая букву на прежнее место. В результате можно получить довольно симпатичный эффект (поводите курсором по ниженаписаному тексту): webobzor.net
Комментарии: [13]
Добавить комментарий:
|
|
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
