jquery Plugin scroll to achieve seamless scrolling effect

Source: Internet
Author: User
Tags time interval

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.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

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.