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 文档碎片
Jul 13 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
Feb 06 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
Mar 19 Javascript
jquery uploadify 在FF下无效的解决办法
Sep 26 Javascript
js实现瀑布流的三种方式比较
Jun 28 Javascript
jQuery点击输入框显示验证码图片
May 19 Javascript
javascript数字验证的实例代码(推荐)
Aug 20 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
Oct 05 Javascript
详解Vue组件之间的数据通信实例
Jun 17 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
May 26 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
May 26 Javascript
vue使用video插件vue-video-player的示例
Oct 03 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
WordPress判断用户是否登录的代码
2011/03/17 PHP
curl和libcurl的区别简介
2015/07/01 PHP
PHP 微信支付类 demo
2015/11/30 PHP
PHP模糊查询的实现方法(推荐)
2016/09/06 PHP
实例介绍PHP删除数组中的重复元素
2019/03/03 PHP
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
javascript Object与Function使用
2010/01/11 Javascript
JQuery datepicker 使用方法
2011/05/20 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
2013/06/24 Javascript
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
Nodejs使用mysql模块之获得更新和删除影响的行数的方法
2014/03/18 NodeJs
ECMAScript 6即将带给我们新的数组操作方法前瞻
2015/01/06 Javascript
使用jQuery实现input数值增量和减量的方法
2015/01/24 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
基于jQuery实现瀑布流页面
2017/04/11 jQuery
Bootstrap图片轮播效果详解
2017/10/17 Javascript
JavaScript中的高级函数
2018/01/04 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
2019/06/04 Javascript
Python利用字典将两个通讯录文本合并为一个文本实例
2018/01/16 Python
详解python3中zipfile模块用法
2018/06/18 Python
基于Python实现人脸自动戴口罩系统
2020/02/06 Python
CSS3实现3D翻书效果
2016/06/20 HTML / CSS
新东网科技Java笔试题
2012/07/13 面试题
How to spawning asynchronous work in J2EE
2016/08/29 面试题
施工人员岗位职责
2013/12/12 职场文书
《孔子游春》教学反思
2014/02/25 职场文书
周年庆典主持词
2014/04/02 职场文书
咖啡店创业计划书
2014/08/15 职场文书
领导干部个人整改措施落实情况汇报
2014/10/29 职场文书
小孩不笨观后感
2015/06/03 职场文书
药品销售员2015年终工作总结
2015/10/22 职场文书
JS数组去重详情
2021/11/07 Javascript
Golang 切片(Slice)实现增删改查
2022/04/22 Golang