Compatible text line height for each browser
Copy Code code as follows:
(function ($) {
$.fn.extend ({
Rolltitle:function (Opt,callback) {
if (!opt) var opt={};
var _this = this;
_this.timer = null;
_this.lineh = _this.find ("Li:first"). Height ();
_this.line=opt.line?parseint (opt.line,15):p Arseint (_this.height ()/_this.lineh,10);
_this.speed=opt.speed?parseint (opt.speed,10): 3000,//scrolling speed, the larger the number, the slower the speed (ms
_this.timespan=opt.timespan?parseint (opt.timespan,13): 5000; The time interval for scrolling (milliseconds
if (_this.line==0) this.line=1;
_this.upheight=0-_this.line*_this.lineh;
_this.scrollup=function () {
_this.animate ({
Margintop:_this.upheight
},_this.speed,function () {
for (i=1;i<=_this.line;i++) {
_this.find ("Li:first"). Appendto (_this);
}
_this.css ({margintop:0});
});
}
_this.hover (function () {
Clearinterval (_this.timer);
},function () {
_this.timer=setinterval (function () {_this.scrollup ();},_this.timespan);
}). Mouseout ();
}
})
}) (JQuery);
Call Method:
Line: Number of lines of text scrolled at a time
Speed: Time to scroll animation
TimeSpan: Time interval
Copy Code code as follows:
<body>
<ul id= "Runtopic" >
<li> text 1</li>
<li> text 2</li>
<li> text 3</li>
<li> text 4</li>
<li> text 5</li>
</ul>
</body>
<script type= "Text/javascript" >
$ (document.body). Ready (function () {
$ ("#RunTopic"). Rolltitle ({line:1,speed:200,timespan:1500});
});
</script>