This article gives you a summary of the jquery is a single scroll, a lot of line scrolling, Text Pictures screen scrolling effect code, are commonly used in some of the text and graphic seamless scrolling effects, I hope to be familiar with jquery help.
jquery single-line scrolling, volume multiline scrolling, text picture rollover scrolling effect code, need friends can refer to the next.
The following code, after running, needs to be refreshed to load jquery, or not see the effect.
One-line scrolling effect
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 The |
Second, multi-line scrolling effect
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65-66 | <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml "> <head> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title> Untitled document </title> <style type=" Text/css "> ul,li{margin:0;padding:0} # Scrolldiv{width:300px;height:100px;min-height:25px;line-height:25px;border: #ccc 1px Solid;overflow:hidden} # Scrolldiv li{height:25px;padding-left:10px} </style> <script src= "http://img.3lian.net/jslib/jquery/ Jquery14.js "type=" Text/javascript ></script> <script type= "Text/javascript" >//Scrolling plugin (function ($) {$. Fn.extend ({scroll:function (opt,callback) {//Parameter initialization if (!OPT) var opt={}; var _this=this.eq (0). Find ("Ul:first"); Lineh=_this.find ("Li:first"). Height (),//Get row height Line=opt.line?parseint (opt.line,10):p Arseint (This.height ()/lineH, 10),//per scrolling number of rows, default to a screen, that is, the parent container height speed=opt.speed?parseint (opt.speed,10): 500,//scrolling speed, numericalThe larger the speed, the slower (milliseconds) timer=opt.timer?parseint (opt.timer,10): 3000; The scrolling time interval (ms) if (line==0) line=1; var Upheight=0-line*lineh; scrolling function scrollup=function () {_this.animate {margintop:upheight},speed,function () {for (i=1;i<=line;i++) {_ This.find ("Li:first"). Appendto (_this); } _this.css ({margintop:0}); }); //mouse Event binding _this.hover (function () {clearinterval (Timerid);},function () {Timerid=setinterval ("Scrollup ()", timer);}). Mouseout (); })}) (JQuery); $ (document). Ready (function () {$ ("#scrollDiv"). Scroll ({line:4,speed:500,timer:1000}); }); </script> </head> <body> <p> Multi-line scrolling demo:</p> <div id= "Scrolldiv" > <ul> <li > Baidu www.baidu.com</li> <li> Script House www.jb51.net</li> <li> This is the third line of the bulletin title </li> <li> This is the fourth line of the bulletin title </li> <li> This is the announcement title of the fifth line </li> <li> This is the sixth line of the announcement title </li> <li> This is the title of the Bulletin seventh line </li > <li> This is the eighth line of the bulletin title </li> </ul> </div> </body> </html> |
Three, can control the forward and backward multi-line scrolling
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 5 86 87 88 89 | <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml "> <head> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title> Untitled document </title> <style type=" Text/css "> ul,li{margin:0;padding:0} # Scrolldiv{width:300px;height:100px;min-height:25px;line-height:25px;border: #ccc 1px Solid;overflow:hidden} # Scrolldiv li{height:25px;padding-left:10px} </style> <script src= "http://img.3lian.net/jslib/jquery/ Jquery14.js "type=" Text/javascript ></script> <script type= "Text/javascript" > (function ($) {$. Fn.extend ({scroll:function (opt,callback) {//Parameter initialization if (!OPT) var opt={}; var _btnup = $ ("#" + opt.up);//shawphy: Up button var _bt Ndown = $ ("#" + Opt.down);//shawphy: Down button var Timerid; var _this=this.eq (0). Find ("Ul:first"); var lineh=_this.find ("Li:first"). Height (),//Get row height Line=opt.line?parseint (opt.line,10):p arseint (this.Height ()/lineh,10),//per scroll number of rows, default to a screen, that is, the parent container height speed=opt.speed?parseint (opt.speed,10): 500; Scrolling speed, the larger the number, the slower the speed (milliseconds) Timer=opt.timer//?parseint (opt.timer,10): 3000; The scrolling time interval (ms) if (line==0) line=1; var Upheight=0-line*lineh; scrolling function var scrollup=function () {_btnup.unbind ("click", Scrollup);//shawphy: Cancels the function binding of the up button _this.animate ({margintop: Upheight},speed,function () {for (i=1;i<=line;i++) {_this.find ("Li:first"). Appendto (_this);} _this.css ({ margintop:0}); _btnup.bind ("click", Scrollup); Shawphy: The Click event of the button on the binding direction; //shawphy: Page Down function var scrolldown=function () {_btndown.unbind ("click", Scrolldown); for (i=1;i<=line;i++) {_ This.find ("Li:last"). Show (). Prependto (_this); } _this.css ({margintop:upheight}); _this.animate ({margintop:0},speed,function () {_btndown.bind ("click", Scrolldown);}); //shawphy: Automatically play var autoplay = function () {if (timer) Timerid = Window.setinterval (Scrollup,timer); var autostop = function () {if (timer) window.clearinterval (Timerid); Mouse Event Binding _this.hover (Autostop,autoplay). MoUseout (); _BTNUP.CSS ("cursor", "pointer"). Click (scrollup). Hover (Autostop,autoplay);//shawphy: The Up mouse event is bound to _btndown.css (" Cursor "," pointer "). Click (scrolldown). Hover (Autostop,autoplay); })}) (JQuery); $ (document). Ready (function () {$ ("#scrollDiv"). Scroll ({line:4,speed:500,timer:1000,up: "Btn1", Down: "BTN2"}); }); </script> </head> <body> <p> Multi-line scrolling demo:</p> <div id= "Scrolldiv" > <ul> <li > This is the first line of the bulletin title </li> <li> This is the second line of the bulletin heading </li> <li> This is the third line of the bulletin heading </li> <li> This is the fourth line of the bulletin heading. </li> <li> This is the fifth line of the bulletin title </li> <li> This is the bulletin heading sixth line </li> <li> This is the seventh line of the bulletin heading </li> <li > This is the eighth line of the bulletin title </li> </ul> </div> <span id= "BTN1" > Forward </span> <span id= "btn2" > Back </span> </body> </html> |
The above is the entire contents of this article, I hope you can enjoy.
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
