The Jquery-based plug-in for text scrolling by line or line. Name Jquery. RollTitle. You can declare multiple scrolling areas on a page (this is the only thing you want to do). It is compatible with the text line height of Each browser.
The Code is 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): 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 ({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 in one scroll
Speed: the time when the animation is rolled.
Timespan: interval
The Code is as follows:
- Text 1
- Text 2
- Text 3
- Text 4
- Text 5