» » Біжучий рядок на jQuery з ефектом зупинки при наведенні

Біжучий рядок на 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>



Завантажити безкоштовно


scripts
1206 07.02.15



Напівжирний Нахилений текст Підкреслений текст Перекреслений текст | Вирівнювання по лівому краю По центру Вирівнювання по правому краю | Вставка смайликів Вибір кольору | Прихований текст Вставка цитати Перетворити вибраний текст з транслітерації в кирилицю Вставка спойлеру