A lightweight jQuery plugin for animating a simple news ticker
Include script after the jQuery library:
<script src="/path/to/jquery.ticker.js"></script>Add an HTML tag for the ticker container (like a div or a span) with one unordered list containing the ticker items inside. Other content may be inside the ticker container as well.
Ticker headlines (the li tags) may contain the following basic HTML tags: <a>, <b>, <strong>, <i>, <em>, <u>, and <span>.
<div class="ticker">
<strong>News:</strong>
<ul>
<li>Ticker item #1</li>
<li>Ticker item #2</li>
<li><em>Another</em> ticker item</li>
...
</ul>
</div>And initiate it
$('.ticker').ticker();You can even add some styling
.ticker {
width: 500px;
margin: 10px auto;
}
/* The HTML list gets replaced with a single div,
which contains the active ticker item, so you
can easily style that as well */
.ticker div {
display: inline-block;
word-wrap: break-word;
}Ticker attributes can be set globally by setting properties of the $.ticker.defaults object or individually for each call to ticker() by passing a plain object to the options argument. Per-call options override the default options.
$.fn.ticker.defaults = {
random: false, // Whether to display ticker items in a random order
itemSpeed: 3000, // The pause on each ticker item before being replaced
cursorSpeed: 50, // Speed at which the characters are typed
pauseOnHover: true, // Whether to pause when the mouse hovers over the ticker
finishOnHover: true, // Whether or not to complete the ticker item instantly when moused over
cursorOne: '_', // The symbol for the first part of the cursor
cursorTwo: '-', // The symbol for the second part of the cursor
fade: true, // Whether to fade between ticker items or not
fadeInSpeed: 600, // Speed of the fade-in animation
fadeOutSpeed: 300 // Speed of the fade-out animation
};