Today share a jquery implementation for multiple-line scrolling effects.
I look at some forum websites, the bulletin is used more.
| The code is as follows |
Copy Code |
Multi-line scrolling
(function ($) {
$.fn.extend ({
Scroll:function (Opt,callback) {
if (!opt) var opt={};
var _this=this.eq (0). Find ("Ul:first");
var lineh=_this.find ("Li:first"). Height (),
Line=opt.line?parseint (opt.line,10):p Arseint (This.height ()/lineh,10),
Speed=opt.speed?parseint (opt.speed,10): 1000,//scrolling speed, the larger the number, the slower the speed (milliseconds)
Timer=opt.timer?parseint (opt.timer,10): 5000; Time interval for scrolling (milliseconds)
if (line==0) line=1;
var Upheight=0-line*lineh;
Scrollup=function () {
_this.animate ({
Margintop:upheight
},speed,function () {
for (i=1;i |
Example Demo
| The code is as follows |
Copy Code |
| <div id= "Scrolldiv" >
<ul>
<li> I am jquery multi-line scroll bar one </li>
<li> I am jquery multi-line scroll bar two </li>
<li> I am jquery multi-line scroll bar three </li>
<li> I am jquery multi-line scroll bar four </li>
<li> I am jquery multi-line scroll bar five </li>
<li> I am jquery multi-line scroll bar six </li>
<li> I am jquery multi-line scroll bar seven </li>
<li> I am jquery multi-line scroll bar eight </li>
</ul>
</div>.
<script type= "Text/javascript" src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></ Script>
<script type= "Text/javascript" >
Multi-line scrolling
(function ($) {
$.fn.extend ({
Scroll:function (Opt,callback) {
if (!opt) var opt={};
var _this=this.eq (0). Find ("Ul:first");
var lineh=_this.find ("Li:first"). Height (),
Line=opt.line?parseint (opt.line,10):p Arseint (This.height ()/lineh,10),
Speed=opt.speed?parseint (opt.speed,10): 1000,//scrolling speed, the larger the number, the slower the speed (milliseconds)
Timer=opt.timer?parseint (opt.timer,10): 5000; Time interval for scrolling (milliseconds)
if (line==0) line=1;
var Upheight=0-line*lineh;
Scrollup=function () {
_this.animate ({
Margintop:upheight
},speed,function () {
for (i=1;i<=line;i++) {
_this.find ("Li:first"). Appendto (_this);
}
_this.css ({margintop:0});
});
}
_this.hover (function () {
Clearinterval (Timerid);
},function () {
Timerid=setinterval ("Scrollup ()", timer);
}). Mouseout ();
}
})
}) (JQuery);
$ (document). Ready (function () {
$ ("#scrollDiv"). Scroll ({line:4,speed:1000,timer:2000});
});
</script>
|
