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 相关文章推荐
繁简字转换功能
Jul 19 Javascript
制作高质量的JQuery Plugin 插件的方法
Apr 20 Javascript
解决jquery的.animate()函数在IE6下的问题
Dec 03 Javascript
jQuery.Validate验证库的使用介绍
Apr 26 Javascript
JavaScript中string对象
Jun 12 Javascript
js判断当前页面用什么浏览器打开的方法
Jan 06 Javascript
JavaScript中的原型prototype完全解析
May 10 Javascript
vue.js框架实现表单排序和分页效果
Aug 09 Javascript
微信小程序支付之c#后台实现方法
Oct 19 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
Jul 25 Javascript
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
在js中修改html body的样式
Nov 11 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
JAVA/JSP学习系列之二
2006/10/09 PHP
PHP的一个基础知识 表单提交
2011/07/04 PHP
php构造函数的继承方法
2015/02/09 PHP
PHP ajax 异步执行不等待执行结果的处理方法
2015/05/27 PHP
php+mysql实现简单的增删改查功能
2015/07/13 PHP
javascript的函数
2007/01/31 Javascript
Javascript动态绑定事件的简单实现代码
2010/12/25 Javascript
JavaScript基础知识之数据类型
2012/08/06 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
2016/01/05 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
2016/05/25 Javascript
第一次接触神奇的Bootstrap菜单和导航
2016/08/01 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
2017/08/23 jQuery
Vue结合SignalR实现前后端实时消息同步
2017/09/19 Javascript
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
2018/01/02 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
2020/10/30 Javascript
vue实现简易的双向数据绑定
2020/12/29 Vue.js
[01:07]DOTA2次级职业联赛 - Fpb战队宣传片
2014/12/01 DOTA
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
python3基于TCP实现CS架构文件传输
2018/07/28 Python
python接口自动化测试之接口数据依赖的实现方法
2019/04/26 Python
python中return不返回值的问题解析
2020/07/22 Python
python 多线程死锁问题的解决方案
2020/08/25 Python
python exit出错原因整理
2020/08/31 Python
高中生国庆节演讲稿范文2014
2014/09/21 职场文书
2014年作风建设剖析材料
2014/10/23 职场文书
个人原因辞职信模板
2015/05/13 职场文书
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL