jquery插件开发之实现jquery手风琴功能分享


Posted in Javascript onMarch 10, 2014

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

;(function($){
    /*
     * 基于jQuery的简易手风琴切换插件
     */
    $.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等。

Javascript 相关文章推荐
JavaScript脚本性能的优化方法
Feb 02 Javascript
jquery性能优化高级技巧
Aug 24 Javascript
Node.js编写组件的三种实现方式
Feb 25 Javascript
jQuery实现根据滚动条位置加载相应内容功能
Jul 18 Javascript
Bootstrap响应式侧边栏改进版
Sep 17 Javascript
ES6概念 Symbol.keyFor()方法
Dec 25 Javascript
JavaScript实现三级联动菜单实例代码
Jun 26 Javascript
使用 jQuery 实现表单验证功能
Jul 05 jQuery
vue.js input框之间赋值方法
Aug 24 Javascript
详解Vue源码之数据的代理访问
Dec 11 Javascript
微信小程序 wx:for遍历循环使用实例解析
Sep 09 Javascript
Vue中rem与postcss-pxtorem的应用详解
Nov 20 Javascript
文本域光标操作的jQuery扩展分享
Mar 10 #Javascript
jquery插件开发之实现google+圈子选择功能
Mar 10 #Javascript
js实现通用的微信分享组件示例
Mar 10 #Javascript
jquery基础教程之数组使用详解
Mar 10 #Javascript
查询json的数据结构的8种方式简介
Mar 10 #Javascript
js 3秒后跳转页面的实现代码
Mar 10 #Javascript
php is_numberic函数造成的SQL注入漏洞
Mar 10 #Javascript
You might like
国产动画《伍六七》原声大碟大卖,啊哈娱乐引领音乐赋能IP的新尝试
2020/03/08 国漫
国外十大最流行的PHP框架排名
2013/07/04 PHP
PHP FTP操作类代码( 上传、拷贝、移动、删除文件/创建目录)
2014/05/10 PHP
ThinkPHP基本的增删查改操作实例教程
2014/08/22 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
2011/04/27 Javascript
js静态方法与实例方法分析
2011/07/04 Javascript
详解JS 比较两个Json对象的值是否相等的实例
2013/11/20 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
jquery阻止后续事件只执行第一个事件
2014/07/24 Javascript
node.js中的favicon.ico请求问题处理
2014/12/15 Javascript
js+cookies实现悬浮购物车的方法
2015/05/25 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
2016/05/12 Javascript
assert()函数用法总结(推荐)
2017/01/25 Javascript
Nodejs实现多房间简易聊天室功能
2017/06/20 NodeJs
微信小程序 swiper组件构建轮播图的实例
2017/09/20 Javascript
老生常谈JavaScript面向对象基础与this指向问题
2017/10/16 Javascript
bootstrap时间插件daterangepicker使用详解
2017/10/19 Javascript
跟老齐学Python之用Python计算
2014/09/12 Python
Python中的True,False条件判断实例分析
2015/01/12 Python
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
Python可变参数函数用法实例
2015/07/07 Python
Python操作MySQL数据库9个实用实例
2015/12/11 Python
Python基本语法经典教程
2016/03/11 Python
python之yield和Generator深入解析
2019/09/18 Python
基于python实现FTP文件上传与下载操作(ftp&sftp协议)
2020/04/01 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
python中判断文件结束符的具体方法
2020/08/04 Python
Python实现AES加密,解密的两种方法
2020/10/03 Python
加拿大当代时尚服饰、配饰和鞋类专业零售商和制造商:LE CHÂTEAU
2017/10/06 全球购物
欢迎标语大全
2014/06/21 职场文书
群众路线专项整治方案
2014/10/27 职场文书
安阳殷墟导游词
2015/02/10 职场文书
爱护环境建议书
2015/09/14 职场文书
基于PyTorch实现一个简单的CNN图像分类器
2021/05/29 Python
Python Django获取URL中的数据详解
2021/11/01 Python