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 相关文章推荐
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
Oct 12 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
Jun 08 Javascript
javascript self对象使用详解
Oct 18 Javascript
javascript 作用于作用域链的详解
Sep 27 Javascript
JS设计模式之数据访问对象模式的实例讲解
Sep 30 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
Oct 08 Javascript
解决element ui select下拉框不回显数据问题的解决
Feb 20 Javascript
vue设计一个倒计时秒杀的组件详解
Apr 06 Javascript
vue项目前端错误收集之sentry教程详解
May 27 Javascript
js实现移动端吸顶效果
Jan 08 Javascript
js String.prototype.trim字符去前后空格的扩展
Aug 23 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
Sep 05 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
php5.2时间相差8小时
2007/01/15 PHP
队列在编程中的实际应用(php)
2010/09/04 PHP
php+curl 发送图片处理代码分享
2015/07/09 PHP
利用Laravel事件系统如何实现登录日志的记录详解
2017/05/20 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
用JS剩余字数计算的代码
2008/07/03 Javascript
Javascript中3种实现继承的方法和代码实例
2014/08/12 Javascript
点击button获取text内容并改变样式的js实现
2014/09/09 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
2014/10/17 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
Bootstrap 组件之按钮(二)
2016/05/11 Javascript
javascript弹出窗口中增加确定取消按钮
2016/06/24 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
ES6中Generator与异步操作实例分析
2017/03/31 Javascript
jQuery自定义图片上传插件实例代码
2017/04/04 jQuery
Vue2 配置 Axios api 接口调用文件的方法
2017/11/13 Javascript
利用nginx + node在阿里云部署https的步骤详解
2017/12/19 Javascript
js的对象与函数详解
2019/01/21 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
JS实现可用滑块滑动的缓动图代码
2019/09/01 Javascript
JavaScript多种图形实现代码实例
2020/06/28 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
Vue父子组件传值的一些坑
2020/09/16 Javascript
简单说明Python中的装饰器的用法
2015/04/24 Python
Python中的列表生成式与生成器学习教程
2016/03/13 Python
python中range()与xrange()用法分析
2016/09/21 Python
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
用Python在Excel里画出蒙娜丽莎的方法示例
2020/04/28 Python
django为Form生成的label标签添加class方式
2020/05/20 Python
python3获取控制台输入的数据的具体实例
2020/08/16 Python
环境工程与管理大学毕业生求职信
2013/10/02 职场文书
会计主管岗位职责
2014/01/03 职场文书
《北大荒的秋天》教学反思
2014/04/14 职场文书
经营理念标语
2014/06/21 职场文书
matplotlib之pyplot模块实现添加子图subplot的使用
2021/04/25 Python