Home>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>Scrolling Experiment</title>
<style type="text/css">
ul, li {margin:0;padding:0}
#scrolldiv {width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#scrolldiv li {height:25px;padding-left:10px;}
</style>
<script src="js/jquery-1.4.1.js"></script>
<script type="text/javascript">
(function ($) {
$.fn.extend ({
scroll:function (opt, callback) {
//parameter initialization
if (! opt) var opt=();
var _this=this.eq (0) .find ("ul:first");
var lineh=_this.find ("li:first"). height (), //Get line height
line=opt.line?parseint (opt.line, 10):parseint (this.height ()/lineh, 10), //number of lines per scroll,One screen by default,The height of the parent container
speed=opt.speed?parseint (opt.speed, 10):500, //Scrolling speed,The larger the value,Slower (ms)
timer=opt.timer?parseint (opt.timer, 10):2000;//Time interval for scrolling (ms)
if (line == 0) line=1;
var upheight=0-line * lineh;
var downheight=line * lineh-0;
//Scroll function
scrollup=function () {
_this.animate (
{margintop:upheight},speed,function () {
for (i=1;i<= line;i ++) {
_this.find ("li:first"). appendto (_this);
}
_this.css ({margintop:0});
}
);
},//Scroll down function
scrolldown=function () {
_this.animate (
{margintop:downheight}, //animation display css style
speed,function () {
_this.find ("li:last"). prependto (_this);
_this.css ({margintop:0});
}
)
}
var timerid
//Mouse event binding
_this.hover (function () {
clearinterval (timerid);
}, function () {
timerid=setinterval ("scrolldown ()", timer);//Call the scroll down or scroll up function here
}). mouseout ();
}
})
}) (jquery);
$(document) .ready (function () {
$("#scrolldiv"). scroll ({line:1, speed:500, timer:2000});
});
</script>
</head>
<body>
<p>Multi-line scrolling demo:</p>
<div>
<ul>
<li>This is line 1 of the announcement title</li>
<li>This is line 2 of the announcement title</li>
<li>This is line 3 of the announcement title</li>
<li>This is line 4 of the announcement title</li>
<li>This is line 5 of the announcement title</li>
<li>This is line 6 of the announcement title</li>
<li>This is line 7 of the announcement title</li>
<li>This is line 8 of the announcement title</li>
</ul>
</div>
</body>
</html>
  • Previous Solution to DropDownList always selecting the first item
  • Next Difference between drawable bitmap canvas paint in Android