This article introduces a jquery-based code for implementing multi-line text image scrolling. If we have announced these examples in the forum, I will introduce them to you.
Today, I will share a jquery file to implement multi-row scrolling.
I have read a lot of announcements on some Forum websites.
| The Code is as follows: |
Copy code |
// Multi-row 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): parseInt (this. height ()/lineH, 10 ),
Speed = opt. speed? ParseInt (opt. speed, 10): 1000, // rolling speed. The greater the value, the slower the speed (in milliseconds)
Timer = opt. timer? ParseInt (opt. timer, 10): 5000; // interval of scrolling (MS)
If (line = 0) line = 1;
Var upHeight = 0-line * lineH;
ScrollUp = function (){
_ This. animate ({
MarginTop: upHeight
}, Speed, function (){
For (I = 1; I |
Instance demo
| The Code is as follows: |
Copy code |
<Div id = "scrollDiv">
<Ul>
<Li> I am jquery multi-line scroll bar 1 </li>
<Li> I am jquery multi-line scroll bar 2 </li>
<Li> I am jquery, multi-line scroll bar 3 </li>
<Li> I am jquery multi-line scroll bar 4 </li>
<Li> I am jquery multi-line scroll bar 5 </li>
<Li> I am jquery multi-row scroll bar 6 </li>
<Li> I am jquery multi-line scroll bar 7 </li>
<Li> I am jquery multi-line scroll bar 8 </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-row 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): parseInt (this. height ()/lineH, 10 ),
Speed = opt. speed? ParseInt (opt. speed, 10): 1000, // rolling speed. The greater the value, the slower the speed (in milliseconds)
Timer = opt. timer? ParseInt (opt. timer, 10): 5000; // interval of scrolling (MS)
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>
|
