Jquery sample code for multi-line text image scrolling
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:
// 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 larger the value is, the slower the speed (millisecond) 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
The Code is as follows:
<Div id = "scrollDiv"> <ul> <li> I am jquery multi-row scroll bar 1 </li> <li> I am jquery multi-row scroll bar 2 </li> <li> I'm jquery multi-line scroll bar 3 </li> <li> I'm jquery multi-line scroll bar 4 </li> <li> I'm jquery multi-line scroll bar 5 </li> <li> I'm jquery multi-row scroll bar 6 </li> <li> I'm jquery multi-row scroll bar 7 </li> <li> I'm jquery multi-row scroll bar 8 </li> </ul> </div>
<Script type = "text/javascript" src = "http:/(www.jb51.net) /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 larger the value is, the slower the speed (millisecond) 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>
Jquery image scrolling effect code
Tell me your email address and I will send it to you. If it is useful, please adopt it.
Users who want jquery simple webpage special effects (slice scrolling and slides)
The lazy library contains many good items.
Www.lanw.uku.com/js/p1.html