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 处理HTML元素必须避免使用的一种方法
Jul 30 Javascript
JavaScript对象、属性、事件手册集合方便查询
Jul 04 Javascript
jquery中实现标签切换效果的代码
Mar 01 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
May 17 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
Jun 05 Javascript
浏览器兼容性问题大汇总
Dec 17 Javascript
jquery实现简单的遮罩层
Jan 08 Javascript
js学习阶段总结(必看篇)
Jun 16 Javascript
JS完成画圆圈的小球
Mar 07 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
Sep 18 Javascript
Vue中computed及watch区别实例解析
Aug 01 Javascript
vue中可编辑树状表格的实现代码
Oct 31 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
php基础知识:函数基础知识
2006/12/13 PHP
php知道与问问的采集插件代码
2010/10/12 PHP
深入探讨:Nginx 502 Bad Gateway错误的解决方法
2013/06/03 PHP
Joomla开启SEF的方法
2016/05/04 PHP
laravel-admin表单提交隐藏一些数据,回调时获取数据的方法
2019/10/08 PHP
关于JAVASCRIPT urldecode URL解码的问题
2012/01/08 Javascript
js 动态为textbox添加下拉框数据源的方法
2014/04/24 Javascript
javascript使用smipleChart实现简单图表
2015/01/02 Javascript
H5移动端图片压缩上传开发流程
2016/11/09 Javascript
一个炫酷的Bootstrap导航菜单
2016/12/28 Javascript
js实现带缓动动画的导航栏效果
2017/01/16 Javascript
Angularjs中使用指令绑定点击事件的方法
2017/03/30 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
2018/03/07 Javascript
[01:06:54]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第二场 2月28日
2021/03/11 DOTA
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
Python科学计算环境推荐——Anaconda
2014/06/30 Python
跟老齐学Python之编写类之四再论继承
2014/10/11 Python
仅用50行代码实现一个Python编写的计算器的教程
2015/04/17 Python
利用python实现数据分析
2017/01/11 Python
python字符串的方法与操作大全
2018/01/30 Python
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
python实现根据指定字符截取对应的行的内容方法
2018/10/23 Python
python 截取XML中bndbox的坐标中的图像,另存为jpg的实例
2020/03/10 Python
Python3 socket即时通讯脚本实现代码实例(threading多线程)
2020/06/01 Python
Python3读取和写入excel表格数据的示例代码
2020/06/09 Python
详解Anaconda 的安装教程
2020/09/23 Python
俄罗斯隐形眼镜和眼镜在线商店:Cronos
2020/06/02 全球购物
JNI的定义
2012/11/25 面试题
师范生实习自我鉴定
2013/11/01 职场文书
中学生家长评语大全
2014/04/16 职场文书
终止劳动合同证明书样本
2014/11/19 职场文书
2014年学校工会工作总结
2014/12/06 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书
如何解决springcloud feign 首次调用100%失败的问题
2021/06/23 Java/Android
详解Vue项目的打包方式(生成dist文件)
2022/01/18 Vue.js