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 相关文章推荐
document.documentElement && document.documentElement.scrollTop
Dec 01 Javascript
JavaScript 类似flash效果的立体图片浏览器
Feb 08 Javascript
基于jquery的无缝循环新闻列表插件
Mar 07 Javascript
jquery trigger实现联动的方法
Feb 29 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
Jan 21 Javascript
浅谈手写node可读流之流动模式
Jun 01 Javascript
echarts实现词云自定义形状的示例代码
Feb 20 Javascript
基于iview-admin实现动态路由的示例代码
Oct 02 Javascript
vue.js 子组件无法获取父组件store值的解决方式
Nov 08 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
Oct 28 Javascript
vue+iview分页组件的封装
Nov 17 Vue.js
文本域光标操作的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 字符转义 注意事项
2009/05/27 PHP
dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法
2013/04/26 PHP
PHP获取客户端真实IP地址的5种情况分析和实现代码
2014/07/08 PHP
PHP把MSSQL数据导入到MYSQL的方法
2014/12/27 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
jQuery.validate 常用方法及需要注意的问题
2013/03/20 Javascript
a标签的href和onclick 的事件的区别介绍
2013/07/26 Javascript
如何获取网站icon有哪些可行的方法
2014/06/05 Javascript
整理Javascript函数学习笔记
2015/12/01 Javascript
jQuery实现选项卡切换效果简单演示
2015/12/09 Javascript
JS封装的自动创建表格的实现代码
2016/06/15 Javascript
原生JS实现N级菜单的代码
2017/05/21 Javascript
微信小程序实现多个按钮toggle功能的实例
2017/06/13 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
2018/03/03 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
2018/10/11 Javascript
vue-router的hooks用法详解
2020/06/08 Javascript
[01:03:31]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第二局
2016/02/26 DOTA
从零学python系列之数据处理编程实例(二)
2014/05/22 Python
Python with用法实例
2015/04/14 Python
让python在hadoop上跑起来
2016/01/27 Python
读写json中文ASCII乱码问题的解决方法
2016/11/05 Python
Python爬取当当、京东、亚马逊图书信息代码实例
2017/12/09 Python
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
Python 列表的清空方式
2020/01/13 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
利用python进行文件操作
2020/12/04 Python
酒店采购员岗位职责
2014/03/14 职场文书
2014年五四青年节活动方案
2014/03/29 职场文书
财务人员岗位职责
2015/02/03 职场文书
2015年学校办公室工作总结
2015/05/26 职场文书
公司开业主持词
2015/07/02 职场文书
大学学生会竞选稿
2015/11/19 职场文书
Mysql - 常用函数 每天积极向上
2021/04/05 MySQL
Django如何创作一个简单的最小程序
2021/05/12 Python
MySQL中一条update语句是如何执行的
2022/03/16 MySQL