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 相关文章推荐
基于PHP+Jquery制作的可编辑的表格的代码
Apr 10 Javascript
JQuery1.6 使用方法三
Nov 23 Javascript
jQuery实现的Div窗口震动效果实例
Aug 07 Javascript
jquery实现的3D旋转木马特效代码分享
Aug 25 Javascript
Bootstrap每天必学之折叠(Collapse)插件
Apr 25 Javascript
基于jquery插件实现拖拽删除图片功能
Aug 27 Javascript
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
基于vue,vue-router, vuex及addRoutes进行权限控制问题
May 02 Javascript
详解使用jest对vue项目进行单元测试
Sep 07 Javascript
JSON生成Form表单的方法示例
Nov 21 Javascript
Centos7 安装Node.js10以上版本的方法步骤
Oct 15 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
Jul 27 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
syphon 虹吸式咖啡冲泡冲煮倒水的得与失
2021/03/03 冲泡冲煮
PHP个人网站架设连环讲(二)
2006/10/09 PHP
php使用curl模拟登录后采集页面的例子
2013/11/04 PHP
用 Composer构建自己的 PHP 框架之设计 MVC
2014/10/30 PHP
一些技巧性实用js代码小结
2009/10/14 Javascript
javascript中的关于类型转换的性能优化
2010/12/14 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
jquery浏览器滚动加载技术实现方案
2014/06/03 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
2015/09/24 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
2015/10/23 Javascript
分享javascript实现的冒泡排序代码并优化
2016/06/05 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
2017/03/07 Javascript
jQuery实现简单日期格式化功能示例
2017/09/19 jQuery
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
2019/09/27 Javascript
微信小程序实现加入购物车滑动轨迹
2020/11/18 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
学习python (1)
2006/10/31 Python
python算法学习之计数排序实例
2013/12/18 Python
深入源码解析Python中的对象与类型
2015/12/11 Python
解决python 未发现数据源名称并且未指定默认驱动程序的问题
2018/12/07 Python
在python环境下运用kafka对数据进行实时传输的方法
2018/12/27 Python
python 列表输出重复值以及对应的角标方法
2019/06/11 Python
10款最好的Python开发编辑器
2019/07/03 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
浅析两列自适应布局的3种思路
2016/05/03 HTML / CSS
CSS实现的一闪而过的图片闪光效果
2014/04/23 HTML / CSS
美国最值得信赖的宠物药房:Allivet
2019/03/23 全球购物
幼儿园教师个人反思
2014/01/30 职场文书
优秀团支部事迹材料
2014/02/08 职场文书
学校志愿者活动总结
2014/06/27 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
民主生活会发言材料
2014/10/20 职场文书
2014年机关作风建设工作总结
2014/10/23 职场文书
中学感恩教育活动总结
2015/05/05 职场文书