In the previous article, there was a "one-line text rolling up to pause JS Code" <br/> here there is a better jquery implementation. moreover, in terms of motion, you can make scroll pictures and scroll layers. In short, you can play it on your own! Remember to have a jquery library ~ <Br/> one row rolling <br/> <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <meta http-equiv = "Content-Type" C/> <br/> <title> untitled document </title> <br/> <MCE: style type = "text/CSS"> <! -- <Br/> ul, Li {margin: 0; padding: 0 }< br/> # scrolldiv {width: 300px; Height: 25px; line-Height: 25px; Border: # CCC 1px solid; overflow: hidden} <br/> # scrolldiv Li {Height: 25px; padding-left: 10px ;}< br/> --> </MCE: style> <style type = "text/CSS" mce_bogus = "1"> ul, Li {margin: 0; padding: 0} <br/> # scrolldiv {width: 300px; height: 25px; line-Height: 25px; Border: # CCC 1px solid; overflow: hidden} <br/> # scrolldiv Li {Height: 25px; padding-le FT: 10px ;}</style> <br/> <MCE: script src = "plain" mce_src = "plain" type = "text/JavaScript"> </MCE: SCRIPT> <br/> <MCE: Script Type = "text/JavaScript"> <! -- <Br/> function autoscroll (OBJ) {<br/> $ (OBJ ). find ("Ul: First "). animate ({<br/> margintop: "-25px" <br/>}, 500, function () {<br/> resize (this).css ({margintop: "0px "}). find ("Li: First "). appendto (this); <br/>}); <br/>}< br/> $ (document ). ready (function () {<br/> setinterval ('autoscroll ("# scrolldiv") ', 1000) <br/> }); <br/> // --> </MCE: SCRIPT> <br/> </pead> <br/> <body> <br/> <Div id = "scrolldiv"> <br/> <ul> <br/> <li> This is The first line of the announcement title </LI> <br/> <li> This is the second line of the announcement title </LI> <br/> <li> This is the third line of the announcement title </LI> <br/> <li> This is the fourth line of the announcement title </LI> <br/> <li> This is the fifth line of the announcement title </LI> <br /> <li> This is the sixth line of the announcement title </LI> <br/> <li> This is the seventh line of the announcement title </LI> <br/> <li> This is row 8 of the announcement title </LI> <br/> </ul> <br/> </div> <br/> </body> <br/> </ptml> <br/> 2, multi-row scrolling <br/> <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312 "/> <br/> <title> untitled document </title> <br/> <MCE: style type =" text/CSS "> <! -- <Br/> ul, Li {margin: 0; padding: 0} <br/> # scrolldiv {width: 300px; Height: 100px; Min-Height: 25px; line-Height: 25px; Border: # CCC 1px solid; overflow: hidden} <br/> # scrolldiv Li {Height: 25px; padding-left: 10px ;} <br/> --> </MCE: style> <style type = "text/CSS" mce_bogus = "1"> ul, Li {margin: 0; padding: 0} <br/> # scrolldiv {width: 300px; Height: 100px; Min-Height: 25px; line-Height: 25px; Border: # CCC 1px solid; overflow: hidden} <br/> # s Crolldiv Li {Height: 25px; padding-left: 10px ;}</style> <br/> <MCE: script src = "inherit" mce_src = "http://www.cssrain.cn/demo/jquery?api/jquery-1#1#.2.1.pack.js" type = "text/JavaScript"> </MCE: SCRIPT> <br/> <MCE: script Type = "text/JavaScript"> <! -- <Br/> // rolling plug-in <br/> (function ($) {<br/> $. FN. extend ({<br/> scroll: function (OPT, callback) {<br/> // initialize the parameter <br/> If (! OPT) var opt ={}; <br/> VaR _ this = This. eq (0 ). find ("Ul: First"); <br/> var lineh = _ this. find ("Li: First "). height (), // get the row height <br/> line = OPT. line? Parseint (OPT. line, 10): parseint (this. height ()/lineh, 10), // number of rows to be rolled each time. The default value is a screen, that is, the height of the parent container <br/> speed = OPT. speed? Parseint (OPT. Speed, 10): 500, // rolling speed. The greater the value, the slower the speed (in milliseconds) <br/> timer = opt. timer? Parseint (OPT. timer, 10): 3000; // interval of scrolling (MS) <br/> If (line = 0) line = 1; <br/> var upheight = 0-line * lineh; <br/> // rolling function <br/> scrollup = function () {<br/> _ this. animate ({<br/> margintop: upheight <br/>}, speed, function () {<br/> for (I = 1; I <= line; I ++) {<br/> _ this. find ("Li: First "). appendto (_ this); <br/>}< br/> _this.css ({margintop: 0}); <br/> }); <br/>}< br/> // mouse event binding <br/> _ this. hover (function () {<br/> CLE Arinterval (timerid); <br/>}, function () {<br/> timerid = setinterval ("scrollup ()", timer); <br/> }). mouseout (); <br/>}< br/>}) <br/>}) (jquery); <br/> $ (document ). ready (function () {<br/> $ ("# scrolldiv "). scroll ({Line: 4, speed: 500, Timer: 1000}); <br/>}); <br/> // --> </MCE: SCRIPT> <br/> </pead> <br/> <body> <br/> <p> multi-row scrolling Demonstration: </P> <br/> <Div id = "scrolldiv"> <br/> <ul> <br/> <li> This is the first line of the announcement title </Li> <br/> <li> This is the second line of the announcement title </LI> <br/> <li> This is the third line of the announcement title </LI> <br/> <li> This is the fourth line of the announcement title </LI> <br/> <li> This is the fifth line of the announcement title </LI> <br/> <li> This is the sixth line of the announcement title </LI> <br/> <li> This is the announcement. row 7 of the title </LI> <br/> <li> This is the eighth row of the title </LI> <br/> </ul> <br/> </Div> <br/> </body> <br/> </ptml> <br/> 3. Control the scrolling of multiple rows forward and backward <br/> <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312 "/> <br/> <title> untitled document </title> <br/> <MCE: style type =" text/CSS "> <! -- <Br/> ul, Li {margin: 0; padding: 0} <br/> # scrolldiv {width: 300px; Height: 100px; Min-Height: 25px; line-Height: 25px; Border: # CCC 1px solid; overflow: hidden} <br/> # scrolldiv Li {Height: 25px; padding-left: 10px ;} <br/> --> </MCE: style> <style type = "text/CSS" mce_bogus = "1"> ul, Li {margin: 0; padding: 0} <br/> # scrolldiv {width: 300px; Height: 100px; Min-Height: 25px; line-Height: 25px; Border: # CCC 1px solid; overflow: hidden} <br/> # s Crolldiv Li {Height: 25px; padding-left: 10px ;}</style> <br/> <MCE: script src = "inherit" mce_src = "http://www.cssrain.cn/demo/jquery?api/jquery-1#1#.2.1.pack.js" type = "text/JavaScript"> </MCE: SCRIPT> <br/> <MCE: script Type = "text/JavaScript"> <! -- <Br/> (function ($) {<br/> $. FN. extend ({<br/> scroll: function (OPT, callback) {<br/> // initialize the parameter <br/> If (! OPT) var opt ={}; <br/> VaR _ btnup =$ ("#" + OPT. UP); // shawphy: Up button <br/> VaR _ btndown = $ ("#" + OPT. down); // shawphy: down button <br/> var timerid; <br/> VaR _ this = This. eq (0 ). find ("Ul: First"); <br/> var lineh = _ this. find ("Li: First "). height (), // get the row height <br/> line = OPT. line? Parseint (OPT. line, 10): parseint (this. height ()/lineh, 10), // number of rows to be rolled each time. The default value is a screen, that is, the height of the parent container <br/> speed = OPT. speed? Parseint (OPT. Speed, 10): 500; // The rolling speed. The greater the value, the slower the speed (in milliseconds) <br/> timer = opt. Timer //? Parseint (OPT. timer, 10): 3000; // interval of scrolling (MS) <br/> If (line = 0) line = 1; <br/> var upheight = 0-line * lineh; <br/> // rolling function <br/> var scrollup = function () {<br/> _ btnup. unbind ("click", scrollup); // shawphy: unbinds the function of the up button. <br/> _ this. animate ({<br/> margintop: upheight <br/>}, speed, function () {<br/> for (I = 1; I <= line; I ++) {<br/> _ this. find ("Li: First "). appendto (_ this); <br/>}< br/> _this.css ({margintop: 0}); <br/> _ btnup. BIND ("click", scrollup); // shawphy: Click Event bound to the up button <br/>}); <br/>}< br/> // shawphy: flip down function <br/> var scrolldown = function () {<br/> _ btndown. unbind ("click", scrolldown); <br/> for (I = 1; I <= line; I ++) {<br/> _ this. find ("Li: Last "). show (). prependto (_ this); <br/>}< br/> _this.css ({margintop: upheight}); <br/> _ this. animate ({<br/> margintop: 0 <br/>}, speed, function () {<br/> _ btndown. BIND ("click", scrolldown); <br/>}); <br/>}< br/> // shawphy: automatic playback <br/> var autoplay = function () {<br/> If (timer) timerid = Window. setinterval (scrollup, timer); <br/>}; <br/> var autostop = function () {<br/> If (timer) window. clearinterval (timerid); <br/>}; <br/> // bind a mouse event <br/> _ this. hover (autostop, AutoPlay ). mouseout (); <br/> _btnup.css ("cursor", "Pointer "). click (scrollup ). hover (autostop, AutoPlay); // shawphy: binds the event with the cursor up or down <br/> _btndown.css ("cursor", "Pointer "). click (scrolldown ). hover (autostop, AutoPlay); <br/>}< br/>}) <br/>}) (jquery); <br/>$ (document ). ready (function () {<br/> $ ("# scrolldiv "). scroll ({Line: 4, speed: 500, Timer: 1000, up: "btn1", down: "btn2"}); <br/> }); <br/> // --> </MCE: SCRIPT> <br/> </pead> <br/> <body> <br/> <p> multi-row scrolling Demonstration: </P> <br/> <Div id = "scrolldiv"> <br/> <ul> <br/> <li> This is the first line of the announcement title </Li> <br/> <li> This is the second line of the announcement title </LI> <br/> <li> This is the third line of the announcement title </LI> <br/> <LI> This is the fourth line of the announcement title </LI> <br/> <li> This is the fifth line of the announcement title </LI> <br/> <li> This is the title of the announcement. row 6 </LI> <br/> <li> This is the seventh row of the announcement title </LI> <br/> <li> This is the eighth row of the announcement title </LI> <br/> </ul> <br/> </div> <br/> <span id = "btn1"> forward </span> <span id = "btn2"> backward </span> <br/> </body> <br/> </ptml>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
