Публикации

Форумы

Создаем валидную бегущую строку на jQuery
 

Создаем валидную бегущую строку на jQuery

 
Модераторы: Патрик, net1313, Predator, Perfecthus, Kapman
Автор Добавил
Offline Predator
12.03.11 - 13:07
Predator


Сообщений: 4024
Всем привет!

Решил написать очередной урок. Сегодня будем создавать валидную бегущую строку для сайта.

Чаще всего, когда нам нужно сделать бегущую строку на сайте, мы использовали тэг marquee. Однако, это в корне неверное решение, ибо тэг marquee не является валидным, поэтому не проходит проверку соответствия стандартам утвержденных Консорциумом W3.
В этом уроке мы рассмотрим создание валидной бегущей строки на jQuery.

Положительным моментом является и то, что в контейнер с бегущей строкой можно вставлять изображения. Также можно настроить скорость бегущей строки, ее направление и/или остановку или ее отсутствие при наведении курсора.

Шаг первый

Подключим фреймворк jQuery и плагин jscroller к документу, для чего пропишем следующий код между тегами head:
  1. <script type="text/javascript" src="jquery-1.3.2.min.js"></script><script type="text/javascript" src="jscroller-0.4.js"></script>


далее пропишем следующий скрипт:
  1. <script type="text/javascript">$(document).ready(function(){
  2.  
  3. // Add Scroller Object
  4.  
  5. $jScroller.add("#scroller_container","#scroller","left",10, true);
  6.  
  7. // Start Autoscroller
  8.  
  9. $jScroller.start();
  10.  
  11. });
  12.  
  13. </script>


Значение left в данном случае показывает направление движения бегущей строки справа налево. Вместо него можно также прописать right, up, down, что соответственно будет являтся направлениями направо, вверх и вниз.

Скорость строки в примере равна 10. Это значение можно изменить по Вашему желанию.
Убрав параметр true мы удалим свойство остановки бегущей строки при наведении курсора мыши.

Шаг второй

Между тегами head или в отдельном css-файле напишем свойства блока с бегущей строкой:
  1. /* Scroller Box */
  2.  
  3. #scroller_container {
  4. position: relative;
  5. width: 600px;
  6. height: 60px;
  7. overflow: hidden;
  8. }
  9.  
  10. #scroller {
  11. white-space: nowrap;
  12. line-height: 60px;
  13. font-size: 36px;
  14. font-family: Verdana, Arial, Helvetica, sans-serif;
  15. }
  16.  
  17. /* Scoller Box */


Разумеется, вы можете изменить эти стили в соответствии с дизайном вашего сайта.

Шаг третий

Теперь в тело документа вставим непосредственно блок с самой бегущей строкой. Для этого используем следующий код:
  1. <div id="scroller_container"><div id="scroller">Тут собственно само содержимое бегущей строки
  2. </div></div>


На этом всё!

Валидная бегущая строка готова! Удачной реализации на Ваших сайтах и до новых уроков!

PS: javascripts во вложении
_.rar (20,18 кб)


Я не матерюсь, а всего лишь употребляю ненормативную лексику в целях более полного и лаконичного выражения своих эмоций.
Вернуться наверх
Популярность сообщения: 3
Рекламный блок
VPS
Наверх

Offline baykboat
12.03.11 - 15:03
baykboat

Сообщений: 312
Predator: ничего не хочу говорить, про урок, он как всегда великолепен.. но бегущая строка.. это пошло.. ну в современных тенденциях дизайна.. может лет через 30 это буде модно.. как ретро...


Переезжаю в Крым на ПМЖ
Вернуться наверх
Сайт
Популярность сообщения: 1
 
Offline Predator
12.03.11 - 20:40
Predator


Сообщений: 4024
baykboat: Да я ж так, вдруг кому пригодится

PS: А то насуют везде этот ублюдский тэг marquee, да еще и не по одному на странице, аж блевать от увиденного тянет


Я не матерюсь, а всего лишь употребляю ненормативную лексику в целях более полного и лаконичного выражения своих эмоций.
Вернуться наверх
Популярность сообщения: 1
 
Offline net1313
12.03.11 - 22:33
net1313


Сообщений: 2715
Predator: Нaзaд в 90 ые !
Это ж нaдо 70 КБ JQuery подключaть для строчки

Ребятa, вот еще урок всего в одной строчке - вместо лишнего кодa нa JQuery нaпишите вот тaк Вaшa строкa ...
  1. <marquee> Вaшa строкa ... </marquee>


П.С. Скоро нaпишу урок про нaвигaтор Mosaic


Очень Добрый Админ
Жизнь в целом не такая уж и хуёвая штука, хотя конечно неплохо было бы если бы в ней было всё совершенно по-другому.
Вернуться наверх
Популярность сообщения: -1
 
Offline Real
13.03.11 - 00:44
Real

Сообщений: 1236
А вот вы зря тут глумитесь. В некоторых случаях бегущая стока вполне уместна. И очень даже правильно Predator сделал эту статью. Если всё грамотно сделать будет вполне "модное" решение. Никто-же не плюётся на разные "карусели", "аккордионы" и пр. jquery эффекты.
зы хотя от "того самого" облака тегов уже подташнивает.


Всё, что существует на свете, когда-то было мечтой.
Вернуться наверх
Популярность сообщения: 2
 
Offline Predator
13.03.11 - 08:47
Predator


Сообщений: 4024
Real: Да просто net1313 считает все эти дела - финтефлюшками и постоянно плюётся на них...

net1313: Ты вот этот свой пример в одну строчку, валидатором проверь, прежде чем советы давать!


Я не матерюсь, а всего лишь употребляю ненормативную лексику в целях более полного и лаконичного выражения своих эмоций.
Вернуться наверх
Популярность сообщения: 1
 
Offline net1313
14.03.11 - 00:50
net1313


Сообщений: 2715
Predator: невольно получилось что тебя зaдел, хотя ты не причем и повод был именно из зa marquee Помню когдa делaл свой первый сaйт проебaло свернуло все мозги, кaк ее зaстaвить корректно рaботaть во всех брaузерaх. А вообще считaю что сaйт нa котором есть бегущaя строкa это не сaйт.

Во вторых - двa месяцa зaнимaлся кaмaсутрой с jQuery. Чего только не прикрутил, все рaботaло, a в конечном итоге если себя спросить - нaх оно нужно ? jQuery подгружaется уймa ненужного кодa для выполнения того, что можно сделaть с помощщью двух трех строчек javascript


Очень Добрый Админ
Жизнь в целом не такая уж и хуёвая штука, хотя конечно неплохо было бы если бы в ней было всё совершенно по-другому.
Вернуться наверх
Популярность сообщения: 1
 
Offline Predator
14.03.11 - 08:21
Predator


Сообщений: 4024
Сообщение от net1313... Predator: невольно получилось что тебя зaдел, хотя ты не причем и повод был именно из зa marquee
Извинения приняты, на этот раз прощаем


Я не матерюсь, а всего лишь употребляю ненормативную лексику в целях более полного и лаконичного выражения своих эмоций.
Вернуться наверх
Популярность сообщения: 1
 
Offline MasterMed
14.03.11 - 18:36
MasterMed
MasterMed

Сообщений: 398
Медленно бегущая-плавная строка не напрягает даже, а кое-где и помочь может. Но это скорее редкость.


Когда труд - удовольствие, жизнь - хороша!
Когда труд - обязанность, жизнь - рабство!
Вернуться наверх
Сайт
Популярность сообщения: 1
 
Offline Predator
14.03.11 - 18:47
Predator


Сообщений: 4024
MasterMed: Что это у вас с написанием слов случилось, с бодуна чтоли?


Я не матерюсь, а всего лишь употребляю ненормативную лексику в целях более полного и лаконичного выражения своих эмоций.
Вернуться наверх
Популярность сообщения: 1
 
 
Создаем валидную бегущую строку на jQuery

Перейти:  Вернуться наверх