Today to share a page of seamless scrolling jquery.scroll plug-ins. Support up and down, fade in, scrolling time settings, animation time settings, the mouse after whether to stop setting, scroll the mouse liquid moving bar to see the effect of the next page. The plugin is suitable for browsers: IE8, 360, FireFox, Chrome, Safari, Opera, Proud tour, Sogou, the window of the world.
Scroll scrolling Plugin
Support up or down, fade, scroll time settings, animation time settings, mouse over whether to stop setting
Default configuration parameters can be modified
$ (". Content"). Easysroll ({///default configuration parameter direction: "Left",///////////scrolling direction right (leftwards) top (UP) bottom (down) default left Numberr: "1",// The default for each scrolling quantity is 1 delays: "1000", the time required to complete an animation is 1000 equal to 1 seconds scrolling: "1000",//Every time the animation interval by default is 1000 equals 1 seconds fadein:false,// Whether to support fade in or fade default false enterstop:true//mouse move to pause scrolling defaults to True}
HTML code:
?
| 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 | <! DOCTYPE html> <html> <head lang= "en" > <meta charset= "UTF-8" > <title> scrolling plugin (support up and down, fading, Scrolling time settings, animation time settings, mouse over whether to stop settings) </title> <script src= "js/jquery-1.7.2.min.js" type= "Text/javascript" ></ script> <script src= "js/scroll.js" type= "Text/javascript" ></script> </head> <style> *{ margin:0px; padding:0px;} content{width:1010px height:102px overflow:hidden border: #4e83c2 solid 1px; margin:50px auto; Content ul{list-s Tyle:none; margin:0px; padding:0px; Content ul li{width:100px height:100px border: #ccc solid 1px; overflow:hidden;cursor:pointer;} </style> &L T;body> <h1> support up and down, fading, scrolling time setting, animation time setting, mouse over whether to stop setting </h1> <div class= "Content" > <ul type= "box" > <li><img src= "uploads/allimg/150210/1-15021010125i64-lp.jpg" ></li> <li><img src= " Uploads/allimg/150210/1-1502100934032t-lp.png "></li> <li><img src=" uploads/allimg/150209/ 1-1502092312470-l.gif "></li> <li><img src=" uploads/allimg/150209/1-1502091243010-l.jpg "></li> < Li><img src= "uploads/allimg/150208/1-15020q549320-l.jpg" ></li> <li><img src= "uploads/" Allimg/150204/1-150204143012445.jpg "></li> <li><img src=" Uploads/150208/1-15020q94340510.jpg " ></li> <li><img src= "uploads/150207/1-15020gg54i43.jpg" ></li> <li><img src= " Uploads/allimg/131024/89.jpg "></li> <li><img src=" Uploads/allimg/131024/85.png "></li> <li><img src= "Uploads/allimg/131024/84.png" ></li> <li><img src= "uploads/allimg/131024/" 83.jpg "></li> <li><img src=" uploads/allimg/131024/82.png "></li> <li><img src=" Uploads/allimg/131024/81.png "></li> <li><img src=" Uploads/allimg/131024/78.png "></li> </ul> </div> <div> $ (". Content"). Easysroll ({<br>//default configuration parameters <br> direction: ' Left ',/////scroll direction to right (up) top (UP) bottom (down) default left<br> numberr: "1",//per scroll quantity default is 1<br> delays: "1000 ",//the time required to complete an animation by default is 1000 equals 1 seconds <br> scrolling:" 1000 ",///Every time interval of animation default is 1000 equals 1 seconds <br> fadein:false,//whether to support fade in or fade out Default False<br> enterstop:true; Mouse move to pause scrolling default is true<br> <br>}) <br> <br> </div> <script> $ (". Content"). Easysroll ({///default configuration parameter direction: "Left",//////////////////////////////////////////////////////// 0 ",//the time required to complete an animation by default is 1000 equals 1 seconds Scrolling:" 1000 ",//Every time the animation interval by default is 1000 equals 1 seconds fadein:false,//whether to support fade in or fade default false enterstop: True Mouse move to pause scrolling default is true}) </script> </body> </html> |
JS Core Code
?
| 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 90 91 92 93 94 95 96 97-98 | (function ($) {$.fn.easysroll= function (options) {var parameter= {direction: "Left", Numberr: "1", Delays: "1000", Scro Lling: "1000", Fadein:false, enterstop:true}; var ops = $.extend (parameter,options); var $this =$ (this); var _this=this; var _time=null; var obj=_this.find ("[type= ' box ']"); var items=obj.find ("Li"); var itemsleg=items.length; var itemsw=items.outerwidth (true); var itemsh=items.outerheight (true); var _direction=ops.direction; var _numberr =ops.numberr; var _delays=ops.delays; var _scrolling =ops.scrolling; var _fadein=ops.fadein; var _enterstop=ops.enterstop; if (_direction== "Top" | | | _direction== "Bottom") {Items.css ({"Float": "None"}); Obj.width (Itemsw*itemsleg); if (_ direction== "Bottom") {Obj.css ("Margin-top",-_numberr*itemsh);} else if (_direction== "left" | | | _direction== ' right ') {items.css ({"Float": "Left"}); Obj.width (Itemsw*itemsleg); if (_ direction== "right") {Obj.css ("Margin-left",-_NUMBERR*ITEMSW);} else{alert ("You have configured the scrolling direction incorrectly, please reconfigure"); return true;} function scrOll () {if (_direction== "left") {Obj.animate ({"Margin-left":-_numberr*itemsw},number (_delays), function () {for var i= 0;i<_numberr;i++) {obj.find ("li"). EQ (0). Appendto (obj);} obj.css ({"Margin-left": 0}) if (_fadein) {obj.find ("Li"). EQ (0). Animate ({"Opacity": 0},number (_delays)); Obj.find ("Li"). EQ (itemsleg-1). CSS ({"Opacity": 1}); } }); }else if (_direction== ' right ') {obj.animate ({"Margin-left": 0},number (_delays), function () {for (Var i=0;i<_numberr i++) {obj.find ("li"). EQ (itemsleg-1). Prependto (obj); Obj.css ("Margin-left",-_NUMBERR*ITEMSW); if (_fadein) {obj.find ("li"). EQ (0). Animate ({"Opacity": 1},number (_delays)), Obj.find ("Li"). EQ (itemsleg-1). css ({" Opacity ": 0}); } }); }else if (_direction== "top") {Obj.animate ({"Margin-top":-_numberr*itemsh},number (_delays), function () {for (Var i=0;i <_numberr;i++) {obj.find ("li"). EQ (0). Appendto (obj);} obj.css ({"Margin-top": 0}); if (_fadein) {obj.find ("li"). EQ (0). Animate ({"Opacity": 0},number (_delays)), Obj.find ("Li"). EQ (itemsleg-1). css ({" Opacity ": 1}); } }); }else if (_direction== "bottom") {Obj.animate ({"Margin-top": 0},number (_delays), function () {for (Var i=0;i<_numberr i++) {obj.find ("li"). EQ (itemsleg-1). Prependto (obj); Obj.css ("Margin-top",-_NUMBERR*ITEMSH); if (_fadein) {obj.find ("li"). EQ (0). Animate ({"Opacity": 1},number (_delays)), Obj.find ("Li"). EQ (itemsleg-1). css ({" Opacity ": 0}); } }); }} $this. Hover (function () {if (_enterstop) {clearinterval (_time);}},function () {_time= setinterval (scroll,_scrolling ); }). Trigger (' MouseLeave '); }) (JQuery); |
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
