<MyRusakov.ru />

JavaScript, jQuery и Ajax с Нуля до Гуру

JavaScript, jQuery и Ajax с Нуля до Гуру

Видеокурс "JavaScript, jQuery и Ajax с Нуля до Гуру" научит Вас "вдыхать жизнь" в страницы, делая их с потрясающими эффектами и максимальным удобством для пользователя.

Курс научит Вас писать скрипты на JavaScript, а также обучит использованию библиотеки jQuery и технологии Ajax.

Практически любой красивый сайт (с красивыми галереями изображений, слайдерами, плавными переходами и так далее) использует jQuery. А практически на любом серьёзном сайте вовсю используется технология Ajax, которая делает работу с сайтом максимальной удобной.

Поэтому курс "JavaScript, jQuery и Ajax с Нуля до Гуру" Вам просто необходим, если Вы хотите создавать по-настоящему достойные сайты.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Текст на волнах в JavaScript

Текст на волнах в 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>

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (15):

sync.o sync.o 16.04.2011 22:28:42

Ну дает Русаков! Придумал, куда тригонометрию прицепить)) А кто-то говорил, что эти функции Math на фиг не нужны...

Ответить

kruty kruty 20.08.2013 19:27:32

Я сам думав що їх не треба, а тут....)

Ответить

shteyn shteyn 06.03.2012 21:38:07

А Точнее так писать? <head>скрипт</head> <body onload="doWave('MyRusakov.ru', 1)"> <div id="wave"></div> </body>.

Ответить

Admin Admin 06.03.2012 21:39:26

Да.

Ответить

shteyn shteyn 06.03.2012 21:47:22

У меня браузер косячный 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 Извеняюсь за мусор,но может кто подскажет?

Ответить

Admin Admin 06.03.2012 21:59:17

У меня браузер Firefox 10.0.2 всё прекрасно работает. Похоже, что браузер действительно какой-то "поломанный". Возможно, какие-нибудь расширения его сломали, возможно, ещё какая-нибудь ошибка. Но приведённый скрипт рабочий в любом браузере.

Ответить

shteyn shteyn 06.03.2012 22:01:23

Не сомневаюсь что он рабочий,Придется переустановить браузер.

Ответить

shteyn shteyn 06.03.2012 23:52:30

Что за такое? Переустановил браузер ,тоже самое.После удаления строки доктайпа всё заработало.Когда обратно ставлю доктайп то только в firefox не работает скрипт.Что это значит?Доктайп ставится в самой первой строке же?перед тегом html? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Ответить

Admin Admin 07.03.2012 00:03:23

Поставьте вместо wave.innerHTML = out; вот это: document.getElementById("wave").innerHTML = out;

Ответить

shteyn shteyn 07.03.2012 00:12:36

о! работает.А почему только у меня не работал с (wave.innerHTML = out; )? И что означает запись wave.innerHTML ?

Ответить

Admin Admin 07.03.2012 00:37:07

На самом деле, XHTML 1.1 - весьма жёсткий стандарт, который вольности не прощает, и Firefox, видимо, решил поддержать его по полной программе. Поэтому это не работает у всех Firefox с таким строгим стандартом. Нельзя обращаться к элементу id, просто указав его имя. В статье я это подправил, чтобы было всё не только кроссбраузерно, но и работало под разными doctype.

Ответить

katushka katushka 08.12.2012 05:00:58

Интересно, а можно ли избавиться от этих "скачков"?

Ответить

katushka katushka 08.12.2012 05:03:38

Думаю, что в этом есть какая-то причина, ведь с изображениями на волнах такого скачка нет.

Ответить

Admin Admin 08.12.2012 10:45:52

Должно быть возможно, например, так. Сделать у данного элемента фиксированную высоту. А вообще если Вы скопируете данный скрипт на отдельную страницу, то там ничего скакать не будет.

Ответить

Sany Sany 16.10.2014 15:02:42

как от центровать что бы надпись была по середине?

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.