新普京网站-澳门新普京 > 新普京网站 > jquery插件开发之实现jquery手风琴功能分享_jquery_脚本之家

jquery插件开发之实现jquery手风琴功能分享_jquery_脚本之家

2019/12/29 18:57

复制代码 代码如下:;{ /* * 基于jQuery的简易手风琴切换插件 */ $.fn.iAccordion=function{ var self=this; iSet=$.extend({Type:'mouseover',Select:'img',Cur:0,InitInterval:100,Interval:500,Easing:''},iSet||{}); /* * Type: 鼠标事件类型,mouseover,click,mouseleave等 *澳门新普京 , Select: 选择器,用以获取需要切换的元素集合 * Cur: 默认展开元素的索引 * InitInterval: 初始化手风琴效果动画间隔时间 * Interval: 鼠标事件动画间隔时间 *新普京网站 , Easing: 动画效果,需要jQuery.easing支持,参数可参考jQuery.easing@ */ var item,boxW,selectW,animateW,sIndex,animateL; ${ //初始化容器样式 $.css({'position':'relative','overflow':'hidden'}); item=$.find; //初始化切换元素样式 item.css({'position':'absolute','left':0,'top':0}); boxW=$; selectW=item.outerWidth(); animateW=/; //初始化元素排列并为元素data一个索引值 item.each.animate({'left':animateW*i+'px'},iSet.InitInterval,iSet.Easing); $; }).on{//绑定鼠标事件 //获取当前元素索引值 sIndex=$; //鼠标事件动画,通过判断元素索引值与当前元素索引值的大小关系动画显示当前元素并动画排列 item.each{ n > sIndex ? animateL=selectW+animateW* : animateL=animateW*n; $.animate({'left':animateL+'px'},iSet.Interval,iSet.Easing); }); }).eq.trigger;

可用于图片或者容器,使用与常规jQuery插件调用方式无异。实现原理也不难理解,都在代码注释中。想研究的可以看下面的代码,或者样例演示。

如何调用?1、在页面中引入上面的插件代码;2、$.iAccordion;3、相关参数及功能,请参考插件中的注释说明。小小的提示,若需要定义Easing,需要导入jQuery.easing插件 ,Easing的参数即jQuery.easing的方法名称,如easeOutBounce、easeOutQuint等。

上一篇:JS高级调试技巧澳门新普京: 下一篇:在页面加载后执行的几种方式_jquery_脚本之家【新普京网站】