您现在的位置:首页 --> JavaScript --> 基于jQuery的简易手风琴切换插件
基于jQuery的简易手风琴切换插件
浏览:1147次 出处信息
最近确实忙碌。
正好接下来的工作中可能需要一个手风琴效果,就动手写了一个。其实有多个现成的jQuery手风琴插件可以用,但对比了一下,总感觉有些笨重,还是自己写的脉络自己最清楚,扩展起来也更容易些。
可用于图片或者容器,使用与常规jQuery插件调用方式无异。实现原理也不难理解,都在代码注释中。想研究的可以看下面的代码,或者样例演示。
jQuery代码:点此查看样列
;(function($){ /* * 基于jQuery的简易手风琴切换插件@Mr.Think(http://mrthink.net/) */ $.fn.iAccordion=function(iSet){ 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@ http://gsgd.co.uk/sandbox/jquery/easing/ */ var item,boxW,selectW,animateW,sIndex,animateL; $(self).each(function(){ //初始化容器样式 $(this).css({'position':'relative','overflow':'hidden'}); item=$(this).find(iSet.Select); //初始化切换元素样式 item.css({'position':'absolute','left':0,'top':0}); boxW=$(this).outerWidth(); selectW=item.outerWidth(); animateW=(boxW-selectW)/(item.size()-1); //初始化元素排列并为元素data一个索引值 item.each(function(i){ $(this).animate({'left':animateW*i+'px'},iSet.InitInterval,iSet.Easing); $(this).data('index',i); }).on(iSet.Type,function(e){//绑定鼠标事件 //获取当前元素索引值 sIndex=$(this).data('index'); //鼠标事件动画,通过判断元素索引值与当前元素索引值的大小关系动画显示当前元素并动画排列 item.each(function(n){ n > sIndex ? animateL=selectW+animateW*(n-1) : animateL=animateW*n; $(this).stop().animate({'left':animateL+'px'},iSet.Interval,iSet.Easing); }); }).eq(iSet.Cur).trigger(iSet.Type); }); } })(jQuery);
如何调用?
1、在页面中引入上面的插件代码;
2、$(selectmain).iAccordion({…});
3、相关参数及功能,请参考插件中的注释说明。
小小的提示,若需要定义Easing,需要导入jQuery.easing插件,Easing的参数即jQuery.easing的方法名称,如easeOutBounce、easeOutQuint等。
建议继续学习:
- JQuery实现Excel表格呈现 (阅读:46516)
- 分享一个JQUERY颜色选择插件 (阅读:12630)
- jQuery插件---轻量级的弹出窗口wBox. (阅读:9682)
- 10个强大的Ajax jQuery文件上传程序 (阅读:7751)
- jQuery的data()方法 (阅读:7573)
- jQuery性能优化指南 (阅读:7303)
- jQuery Color Animations颜色动画插件 (阅读:7070)
- 精于图片处理的10款jQuery插件 (阅读:6204)
- jQuery中getJSON跨域原理详解 (阅读:5613)
- 在命令行快速切换目录 (阅读:5574)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:javascript运算符
后一篇:js 面向对象日历实现原理详解 >>
文章信息
- 作者:Mr.Think 来源: Mr.Think的博客
- 标签: jQuery 切换 手风琴
- 发布时间:2014-10-15 23:01:00
建议继续学习
近3天十大热文
- [67] 如何拿下简短的域名
- [67] Oracle MTS模式下 进程地址与会话信
- [67] Go Reflect 性能
- [61] IOS安全–浅谈关于IOS加固的几种方法
- [59] 【社会化设计】自我(self)部分――欢迎区
- [59] 图书馆的世界纪录
- [59] android 开发入门
- [56] 视觉调整-设计师 vs. 逻辑
- [49] 给自己的字体课(一)——英文字体基础
- [47] 读书笔记-壹百度:百度十年千倍的29条法则