jquery Scrolling Effects Gallery

Source: Internet
Author: User
Tags bind extend min setinterval time interval xmlns

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.