В данной статье представлено описание интересного эффекта "прагающих букв", который был позаимствован из одного флэш ролика и переписан на 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) &#038;& (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) &#038;& (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, опускающая букву на прежнее место.