scroll滾動插件
支持上下左右，淡入淡出，滾動時間設置，動畫時間設置，鼠標經過是否停止設置
默認配置參數可修改
$(".content").easysroll({ //默認配置參數 direction: "left", //滾動方向 left（向左）right（向右） top(向上) bottom(向下) 默認left numberr: "1", //每一次滾動數量 默認是1 delays:"1000",//完成一次動畫所需時間 默認是1000等于1秒 scrolling: "1000",//每一次動畫的時間間隔 默認是1000等于1秒 fadein:false,//是否支持淡入或淡出 默認false enterStop:true //鼠標移入是否暫停滾動 默認是true })
html代碼：
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>滾動插件（支持上下左右，淡入淡出，滾動時間設置，動畫時間設置，鼠標經過是否停止設置）</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-style: none; margin: 0px; padding: 0px; }.content ul li{ width: 100px; height: 100px; border:#ccc solid 1px; overflow: hidden;cursor: pointer;}</style><body><h1>支持上下左右，淡入淡出，滾動時間設置，動畫時間設置，鼠標經過是否停止設置</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>//默認配置參數<br>direction: "left", //滾動方向 left（向左）right（向右） top(向上) bottom(向下) 默認left<br>numberr: "1", //每一次滾動數量 默認是1<br>delays:"1000",//完成一次動畫所需時間 默認是1000等于1秒<br>scrolling: "1000",//每一次動畫的時間間隔 默認是1000等于1秒<br>fadein:false,//是否支持淡入或淡出 默認false<br>enterStop:true; //鼠標移入是否暫停滾動 默認是true<br><br>})<br><br></div><script>$(".content").easysroll({//默認配置參數direction: "left", //滾動方向 left（向左）right（向右） top(向上) bottom(向下) 默認leftnumberr: "1", //每一次滾動數量 默認是1delays:"1000",//完成一次動畫所需時間 默認是1000等于1秒scrolling: "1000",//每一次動畫的時間間隔 默認是1000等于1秒fadein:false,//是否支持淡入或淡出 默認falseenterStop:true; //鼠標移入是否暫停滾動 默認是true})</script></body></html>JS核心代碼
(function ($) {$.fn.easysroll= function(options) {var parameter= {direction: "left",numberr: "1",delays:"1000",scrolling: "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("您配置的滾動方向有誤，請重新配置");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);以上所述就是本文的全部內容了，希望大家能夠喜歡。
新聞熱點
疑難解答
