Текст на волнах в JavaScript
Описание: Давно я не добавлял новых скриптов на JavaScript, и решил сегодня показать один весьма интересный скрипт, который способен, как минимум, привлечь внимание пользователя - это скрипт "Текст на волнах", написанный на JavaScript.
Результат:
Код JavaScript (вставлять между тегами <head> и </head>):
<script type="text/javascript">
function nextSize(i, way, length) {
if (way == 1)
return 30 * Math.abs(Math.sin(i / (length / Math.PI)));
else
if (way == 2)
return 100 * Math.abs(Math.cos(i / (length / Math.PI)));
}
function sizeCycle(text, way, d) {
out = "";
for (i = 0; i < text.length; i++) {
size = parseInt(nextSize(i + d, way, text.length));
out += "<span style='font-size: "+ size +"pt'>" +text.substring(i, i + 1)+ "</span>";
}
document.getElementById("wave").innerHTML = out;
}
function doWave(text, n) {
sizeCycle(text, 1, n);
if (n > text.length) n = 0;
setTimeout("doWave(\"" + text + "\", " + (n + 1) + ")", 50);
}
</script>
Код HTML (вставлять между тегами <body onload="doWave('MyRusakov.ru', 1)"> и </body>):
<div id="wave"></div> -
Создано 16.04.2011 13:48:57
-
Михаил Русаков
Комментарии (15):
Ну дает Русаков! Придумал, куда тригонометрию прицепить)) А кто-то говорил, что эти функции Math на фиг не нужны...
Ответить
Я сам думав що їх не треба, а тут....)
Ответить
А Точнее так писать? <head>скрипт</head> <body onload="doWave('MyRusakov.ru', 1)"> <div id="wave"></div> </body>.
Ответить
Да.
Ответить
У меня браузер косячный firefox. На всех остальных работает нормально скрипт.У меня установлен web developer Может в нем дело?Яваскрипт включен.web developer сообщает: Ошибка: Components.classes['@mozilla.org/oji/jvm-mgr;1'] is undefined Источник: chrome://webdeveloper/content/tools.js Строка: 4 Ошибка: wave is not defined Источник: file:///Z:/home/wow/www/new%20%204.html Строка: 23 Извеняюсь за мусор,но может кто подскажет?
Ответить
У меня браузер Firefox 10.0.2 всё прекрасно работает. Похоже, что браузер действительно какой-то "поломанный". Возможно, какие-нибудь расширения его сломали, возможно, ещё какая-нибудь ошибка. Но приведённый скрипт рабочий в любом браузере.
Ответить
Не сомневаюсь что он рабочий,Придется переустановить браузер.
Ответить
Что за такое? Переустановил браузер ,тоже самое.После удаления строки доктайпа всё заработало.Когда обратно ставлю доктайп то только в firefox не работает скрипт.Что это значит?Доктайп ставится в самой первой строке же?перед тегом html? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Ответить
Поставьте вместо wave.innerHTML = out; вот это: document.getElementById("wave").innerHTML = out;
Ответить
о! работает.А почему только у меня не работал с (wave.innerHTML = out; )? И что означает запись wave.innerHTML ?
Ответить
На самом деле, XHTML 1.1 - весьма жёсткий стандарт, который вольности не прощает, и Firefox, видимо, решил поддержать его по полной программе. Поэтому это не работает у всех Firefox с таким строгим стандартом. Нельзя обращаться к элементу id, просто указав его имя. В статье я это подправил, чтобы было всё не только кроссбраузерно, но и работало под разными doctype.
Ответить
Интересно, а можно ли избавиться от этих "скачков"?
Ответить
Думаю, что в этом есть какая-то причина, ведь с изображениями на волнах такого скачка нет.
Ответить
Должно быть возможно, например, так. Сделать у данного элемента фиксированную высоту. А вообще если Вы скопируете данный скрипт на отдельную страницу, то там ничего скакать не будет.
Ответить
как от центровать что бы надпись была по середине?
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.