Jquery-based text-scrolling marquee plug-in called multiple times on the same page
Call method:
Line: number of lines of text in one scroll
Speed: the time when the animation is rolled.
Timespan: interval
<Html>
<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/Webpage effects">
$ (Document. body). ready (function (){
$ ("# Runtopic"). rolltitle ({line: 1, speed: 200, timespan: 1500 });
});
</Script>
</Html>
Jquery code
(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): parseint (_ this. height ()/_ this. lineh, 10 );
_ This. speed = opt. speed? Parseint (opt. speed, 10): 3000, // rolling speed. The greater the value, the slower the speed (in milliseconds)
_ This. timespan = opt. timespan? Parseint (opt. timespan, 13): 5000; // interval of scrolling (MS)
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 tutorial ({margintop: 0 });
});
}
_ This. hover (function (){
Clearinterval (_ this. timer );
}, Function (){
_ This. timer = setinterval (function () {_ this. scrollup () ;}, _ this. timespan );
}). Mouseo tutorial ut ();
}
})
}) (Jquery );