Introduction
This is a very simple scroller script that can be added to any HTML
page. This Example has
been tested and is compatible in IE, Netscape, Firefox, and Opera
browsers.
Background
This example is being done using the jQuery framework.
Using the code
HTML Structure
<div id="tickerwrapper">
<div class="container">
<ul>
<li>1 </li>
<li>2 </li>
<li>3 </li>
<li>4 </li>
<li>5 </li>
<li>6 </li>
</ul>
</div>
</div>
CSS
*{padding:0;margin:0}
ul li{list-style:none}
#tickerwrapper{padding:20px;width:150px}
#tickerwrapper ul li{padding:5px;text-align:center}
#tickerwrapper .container{background:#ccc;height:31px;overflow:hidden;width:150px;}
JavaScript code
var containerheight = 0;
var numbercount = 0;
var liheight;
var index = 1;
function callticker() {
$(".container ul").animate({
"margin-top": (-1) * (liheight * index)
}, 2500);
if (index != numbercount - 1) {
index = index + 1;
}
else {
index = 0;
}
timer = setTimeout("callticker()", 100);
}
$(document).ready(function() {
numbercount = $(".container ul li").size();
liheight = $(".container ul li").outerHeight();
containerheight = $(".container ul li").outerHeight() * numbercount;
$(".container ul").css("height", containerheight);
var timer = setTimeout("callticker()", 100);
});
View this example
Click here