Easy jQuery Scrolling News Ticker Plugin - liScroll

jQuery liScroll is a extremely simple and lightweight jQuery plugin that turns the default unordered list into a Scrolling News Ticker with mouse pause support.

Related plugins:

• jQuery Plugin For Animated Vertical Ticker - totem
• BBC News-Like Website Ticker Plugin with jQuery - News Ticker
• Highly Customizable jQuery Text Scrolling Plugin - Web Ticker
• Tumblr News Ticker Widget with jQuery
• jQuery Vertical Scrolling Web Ticker Plugin - vticker
• News Ticker Like Content Scrolling Plugin For jQuery - Easy Ticker

How to use it:

1. Include jQuery library and jQuery liScroll plugin on the web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="jquery.li-scroller.1.0.js"></script>

2. Create an unordered list with a unique ID

<ul id="demo">
    <li><span>10/06/2013</span><a href="#">The first thing ...</a></li>
    <li><span>10/06/2013</span><a href="#">End up doing is ...</a></li>
    <li><span>10/06/2013</span><a href="#">The code that you ...</a></li>
</ul>

3. Style the list with CSS

.tickercontainer { 
border: 1px solid #000;
background: #fff; 
width: 738px; 
height: 27px; 
margin: 0; 
padding: 0;
overflow: hidden; 
}
.tickercontainer .mask { 
position: relative;
left: 10px;
top: 8px;
width: 718px;
overflow: hidden;
}
ul.newsticker { 
position: relative;
left: 750px;
font: bold 10px Verdana;
list-style-type: none;
margin: 0;
padding: 0;

}
ul.newsticker li {
float: left; 
margin: 0;
padding: 0;
background: #fff;
}
ul.newsticker a {
white-space: nowrap;
padding: 0;
color: #ff0000;
font: bold 10px Verdana;
margin: 0 50px 0 0;
} 
ul.newsticker span {
margin: 0 10px 0 0;
} 

4. Call the plugin with options

<script>
$(function(){
$("ul#demo").liScroll({
travelocity: 0.15 // the speed of scrolling
});
});
</script>

---

This awesome jQuery plugin is developed by jq-liscrol. For more Advanced Usages, please check the demo page or visit the official website.