Создание бегущей строки и новостной ленты на jQuery на ваш сайт    
Радио Business FM прямой эфир.
Главная » 2017 » Апрель » 4 » Создание бегущей строки и новостной ленты на jQuery на ваш сайт » [396]
11:56
Создание бегущей строки и новостной ленты на jQuery на ваш сайт

Создание бегущей строки и новостной ленты на jQuery на ваш сайт

Исходники: СКАЧАТЬ Файл "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 на ваш сайт

Плавная бегущая строка на 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 кб.  Смотреть: Demo

 

 Видео канал: /youtube.com/

 

 

Источник

счетчик посещений

Категория: Веб-Мастер | Просмотров: 396 | :: : | Теги: бегущая строка, бегущая строка на jQuery, HTML код, веб мастер
Всего комментариев: 0
avatar