Исходники: СКАЧАТЬ Файл "ZIP" 20,7 кб.
Плавная бегущая строка на jquery представляет из себя блоки с анонсами новостей или статей, которые двигаются по сайту с права налево друг за другом в фиксированном блоке.
Чаще всего, когда нам нужно было сделать бегущую строку на сайте, мы пользовались тегом MARQUEE. Однако, он не является валидным, поэтому не проходит проверку соответствия стандартам. В этом уроке мы рассмотрим создание бегущей строки на jQuery.
Положительным моментом является и то, что в контейнер с бегущей строкой можно вставить изображения. Также можно настроить скорость бегущей строки, ее направление и остановку или ее отсутствие при наведении курсора.
Шаг 1.
Подключим фреймворк jquery и плагин jscroller к документу, для чего пропишем следующий код между тегами <head> и </head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jscroller-0.4.js"></script>
Далее пропишем следующий скрипт:
<script type="text/javascript">
$(document).ready(function(){
// Add Scroller Object
$jScroller.add("#scroller_container","#scroller","left",10, true);
// Start Autoscroller $jScroller.start(); }); </script>
Значение left в данном случае показывает направление движения бегущей строки налево. Вместо него можно также прописать right, up, down, что соответственно будет являтся направлениями направо, вверх и вниз.
Скорость в примере равна 10. Это значение можно изменить по Вашему желанию. Убрав параметр true мы удалим свойство остановки бегущей строки при наведении курсора.
Шаг 2.
Между тегами head или в отдельном css-файле напишем свойства блока с бегущей строкой:
/* Scroller Box */
#scroller_container {
position: relative;
width: 600px;
height: 60px;
overflow: hidden;
}
#scroller {
white-space: nowrap;
line-height: 60px;
font-size: 36px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
/* Scoller Box */
Разумеется, Вы можете изменить эти стили в соответствии с дизайном Вашего сайта.
Шаг 3.
Теперь в тело документа вставим непосредственно блок с бегущей строкой. Для этого используем следующий код:
<div id="scroller_container">
<div id="scroller">
Текст: Содержание бегущей строки.
</div>
</div>
Валидная бегущая строка готова! Удачной реализации на Ваших сайтах!
Тема 2.
Бегущая новостная строка на Jquery с эффектом остановки при наведении курсора
Плавная бегущая строка на jquery представляет из себя блоки с анонсами новостей или статей, которые двигаются по сайту с права налево друг за другом в фиксированном блоке. При наведении на любой анонс - бегущая строка останавливается, для того, чтобы вы могли нажать на ссылку.
Данный плагин шикарно подойдет для новостной ленты, если у вас на сайте не так много места, где можно разместить блок с новостной лентой. В тему будет смотреться бегущая строка на новостном сайте или на сайте с объявлениями. В содержимом блоков этой бегущей строки можно поместить информацию об акциях, скидках и так далее.
Бегущая строка из-за своей анимации всегда привлечет к себе внимание, так что ее использование может быть и в рекламных целях (я имею ввиду рекламные ссылки).
Устанавливается на сайт этот скрипт очень просто:
1. Скачиваем архив (в низу статьй) и его содержимое заливаем в корень сайта
2. Между <head> и </head> прописываем:
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.li-scroller.1.0.js"></script>
<link rel="stylesheet" href="li-scroller.css" type="text/css" media="screen" />
<script type="text/javascript">
$(function(){
$("ul#ticker01").liScroll();
$("ul#ticker02").liScroll({travelocity: 0.15});
//Syntax
});</script>
<style type="text/css">
#wrapp {width: 760px;text-align: left;font: normal 1em Arial;margin: 0 auto;padding: 0;color: black;}
</style>
3. Вставляем html код на страницу, где вы хотите видеть эту бегущую строку:
<ul id="ticker01">
<li><span>10/10/2007</span><a href="#/ogt/content/news/News183.complete">The first thing that most Javascript programmers</a></li>
<li><span>10/10/2007</span><a href="#/ogt/content/news/News175.complete">End up doing is adding some code</a></li>
<li><span>10/10/2007</span><a href="#/ogt/content/news/News177.complete">The code that you want to run</a></li>
<li><span>08/10/2007</span><a href="#/ogt/content/news/News176.complete">Inside of which is the code that you want to run</a></li>
<li><span>08/10/2007</span><a href="#/ogt/content/news/News178.complete">Right when the page is loaded</a></li>
<li><span>05/10/2007</span><a href="#/ogt/content/news/News173.complete">Problematically, however, the Javascript code</a></li>
<li><span>04/10/2007</span><a href="#/ogt/content/news/News183.complete">The first thing that most Javascript programmers</a></li>
<li><span>04/10/2007</span><a href="#/ogt/content/news/News175.complete">End up doing is adding some code</a></li>
<li><span>04/10/2007</span><a href="#/ogt/content/news/News177.complete">The code that you want to run</a></li>
<li><span>03/10/2007</span><a href="#/ogt/content/news/News176.complete">Inside of which is the code that you want to run</a></li>
<li><span>03/10/2007</span><a href="#/ogt/content/news/News178.complete">Right when the page is loaded</a></li>
<li><span>01/10/2007</span><a href="#/ogt/content/news/News173.complete">Problematically, however, the Javascript code</a></li>
</ul>
В демонстрационной версии показаны два варианта скорости бегущей строки. Изменять скорость вы можете с помощью вот этой строки в head-e "$("ul#ticker02").liScroll({travelocity: 0.15});" и естественно при этом нужно использовать id="ticker02". Успехов Вам!
Исходники: СКАЧАТЬ Файл "ZIP" 33,7 кб.
Источник ☞
| 
РАБОТА
