您好,欢迎访问一九零五行业门户网

jQuery插件scroll实现无缝滚动效果_jquery

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代码:
滚动插件(支持上下左右,淡入淡出,滚动时间设置,动画时间设置,鼠标经过是否停止设置)支持上下左右,淡入淡出,滚动时间设置,动画时间设置,鼠标经过是否停止设置
$(.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
})

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);
以上所述就是本文的全部内容了,希望大家能够喜欢。
其它类似信息

推荐信息