Jquery滚动插件–Xslider:支持水平滚动和垂直滚动的多种效果
来源:互联网 发布:知乎 雷洋 编辑:程序博客网 时间:2024/05/19 03:45
源地址 http://www.rjboy.cn/?p=708
本插件在原有基础上,添加了一些小功能:
1.点击单个unit时,自动使该unit的左边或者右边unit显示出来。
/*http://www.rjboy.cnBy sean during 2010.07 - 2010.12;Demo:$(".productshow").Xslider({//.productshow是要移动对象的外框,页面上所有绑定了类.productshow的对象都会有切换效果;unitdisplayed:3,//可视的单位个数 必需项;numtoMove:1,//要移动的单位个数 必需项;viewedSize:120,//可视宽度或高度 不传入则查找要移动对象外层的宽或高度;scrollobj:".vscrollobj",//要移动的对象 不传入则查找productshow下的ul;unitlen:20,//移动的单位宽或高度 不传入则查找li的尺寸;scrollobjSize:$(".vscrollobj").height(),//移动最长宽或高(要移动对象的宽度或高度) 不传入则由li个数乘以unitlen计算;dir:"V",//水平移动还是垂直移动 默认H为水平移动,传入V则表示垂直移动(注意是大写字母);loop:"cycle",//循环滚动 不传入则不循环滚动;speed:500, //滚动速度 默认为500;autoscroll:2000//自动移动间隔时间(毫秒) 不传入则不会自动移动;});*/(function($){$.extend($.easing,{easeInSine: function (x, t, b, c, d) {return -c * Math.cos(t/d * (Math.PI/2)) + c + b;}});$.fn.Xslider=function(settings){settings=$.extend({},$.fn.Xslider.sn.defaults,settings);this.each(function(){var scrollobj=settings.scrollobj ? $(this).find(settings.scrollobj) : $(this).find("ul"), viewedSize=settings.viewedSize || (settings.dir=="H" ? scrollobj.parent().width() : scrollobj.parent().height()),//length of the wrapper visible; scrollunits=scrollobj.find("li"),//units to move; unitlen=settings.unitlen || (settings.dir=="H" ? scrollunits.eq(0).outerWidth() : scrollunits.eq(0).outerHeight()), unitdisplayed=settings.unitdisplayed,//units num displayed;numtoMove=settings.numtoMove > unitdisplayed ? unitdisplayed : settings.numtoMove, scrollobjSize=settings.scrollobjSize || scrollunits.length*unitlen,//length of the scrollobj; offset=0,//max width to move; offsetnow=0,//scrollobj now offset; movelength=unitlen*numtoMove,pos=settings.dir=="H" ? "left" : "top", moving=false,//moving now?; btnright=$(this).find("p.jtright"), btnleft=$(this).find("p.jtleft");btnright.unbind("click");btnleft.unbind("click");// 重新计算scrollobjSize = 0;$.each(scrollunits, function(index, unit){scrollobjSize += $(unit).outerWidth();$(unit).bind("click", function(){// 将点击的unit的左边或者右边智能显示if ($(this).position().left < (offsetnow + unitlen)){btnleft.click();}else if (($(this).position().left + $(unit).outerWidth() + unitlen) > (offsetnow+viewedSize) ){btnright.click();}});});settings.dir=="H" ? scrollobj.css("left","0px") : scrollobj.css("top","0px");if(scrollobjSize>viewedSize){if(settings.loop=="cycle"){btnleft.removeClass("jtgrayleft");if(scrollunits.length<2*numtoMove+unitdisplayed-numtoMove){scrollobj.find("li").clone().appendTo(scrollobj);}}else{btnleft.addClass("jtgrayleft");offset=scrollobjSize-viewedSize;}btnright.removeClass("jtgrayright");}else{btnleft.addClass("jtgrayleft");btnright.addClass("jtgrayright");}btnleft.click(function(){if($(this).is("[class*='jtgrayleft']")){return false;}if(!moving){moving=true;if(settings.loop=="cycle"){scrollobj.find("li:gt("+(scrollunits.length-numtoMove-1)+")").prependTo(scrollobj);scrollobj.css(pos,"-"+movelength+"px");$.fn.Xslider.sn.animate(scrollobj,0,settings.dir,settings.speed,function(){moving=false;});}else{offsetnow-=movelength;if(offsetnow>unitlen*unitdisplayed-viewedSize){$.fn.Xslider.sn.animate(scrollobj,-offsetnow,settings.dir,settings.speed,function(){moving=false;});}else{$.fn.Xslider.sn.animate(scrollobj,0,settings.dir,settings.speed,function(){moving=false;});offsetnow=0;$(this).addClass("jtgrayleft");}btnright.removeClass("jtgrayright");}}return false;});btnright.click(function(){if($(this).is("[class*='jtgrayright']")){return false;}if(!moving){moving=true;if(settings.loop=="cycle"){var callback=function(){scrollobj.find("li:lt("+numtoMove+")").appendTo(scrollobj);scrollobj.css(pos,"0px");moving=false;};$.fn.Xslider.sn.animate(scrollobj,-movelength,settings.dir,settings.speed,callback);}else{offsetnow+=movelength;if(offsetnow<offset-(unitlen*unitdisplayed-viewedSize)){$.fn.Xslider.sn.animate(scrollobj,-offsetnow,settings.dir,settings.speed,function(){moving=false;});}else{$.fn.Xslider.sn.animate(scrollobj,-offset,settings.dir,settings.speed,function(){moving=false;});//滚动到最后一个位置;offsetnow=offset;$(this).addClass("jtgrayright");}btnleft.removeClass("jtgrayleft");}}return false;});if(settings.autoscroll){$.fn.Xslider.sn.autoscroll($(this),settings.autoscroll);}});};$.fn.Xslider.sn={defaults:{dir:"H",speed:500},animate:function(obj,w,dir,speed,callback){if(dir=="H"){obj.animate({"left":w},speed,"easeInSine",callback);}else if(dir=="V"){obj.animate({"top":w},speed,"easeInSine",callback);}},autoscroll:function(obj,time){var vane="right";function autoscrolling(){if(vane=="right"){if(!obj.find("p.jtgrayright").length){obj.find("p.jtright").trigger("click");}else{vane="left";}}if(vane=="left"){if(!obj.find("p.jtgrayleft").length){obj.find("p.jtleft").trigger("click");}else{vane="right";}}}var scrollTimmer=setInterval(autoscrolling,time);obj.hover(function(){clearInterval(scrollTimmer);},function(){scrollTimmer=setInterval(autoscrolling,time);});}};})(jQuery);
0 0
- Jquery滚动插件–Xslider:支持水平滚动和垂直滚动的多种效果
- Jquery滚动插件–Xslider:支持水平滚动和垂直滚动的多种效果!
- Xslider:支持水平滚动和垂直滚动的多种效果
- jQuery模拟百度新闻不间断滚动效果,支持文字、图片水平垂直滚动
- 水平和垂直滚动的HVScrollView
- Android:TextView的垂直滚动效果,和上下滚动效果
- Android:TextView的垂直滚动效果,和上下滚动效果
- Android:TextView的垂直滚动效果,和上下滚动效果
- 垂直、水平滚动的TextView
- 垂直竖向,水平滚动插件插件
- 水平滚动字幕的jquery插件和原生代码
- 水平滚动字幕的jquery插件和原生代码
- xSlider 可左右、上下图片切换的无缝滚动效果
- jquery Xslider 插件焦点图片特效图片淡隐淡现、图片上下滚动、图片左右滚动、选项卡
- 垂直水平滚动条
- 水平/垂直滚动联动
- 自定义View实现文字跑马灯效果(垂直滚动和水平滚动)
- TextView的垂直滚动效果
- linux 下跟文件系统详解
- 让乌龟SVN (TortoiseSVN)提交时忽略目录
- 得到某一用户的稿件总数
- backupmanagerservce
- MySQL导出Excel
- Jquery滚动插件–Xslider:支持水平滚动和垂直滚动的多种效果
- 安装时,错误 29503 ,SQL Server 服务无法启动
- 无广告优酷播放器
- firefox tabs 的管理
- linux 进程 VS 线程
- 【C++再学习】【08】编译时与运行时
- 产品36记:第十四,产品炼成?
- 开元研究品牌调研的内容
- iOS开发之后台运行