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 清除输入框中的数据
Apr 13 Javascript
js比较和逻辑运算符的介绍
Mar 10 Javascript
AngularJS基础学习笔记之控制器
May 10 Javascript
jquery实现简单的自动播放幻灯片效果
Jun 13 Javascript
简单谈谈JavaScript的同步与异步
Dec 31 Javascript
js基于setTimeout与setInterval实现多线程
Jun 17 Javascript
javascript时间差插件分享
Jul 18 Javascript
详解Node.js中的事件机制
Sep 22 Javascript
Bootstrap CSS使用方法
Dec 23 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
Dec 18 Javascript
详解Nuxt.js Vue服务端渲染摸索
Feb 08 Javascript
Vue常用的全选/反选的示例代码
Feb 19 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
sql注入与转义的php函数代码
2013/06/17 PHP
PHP中常用的字符串格式化函数总结
2014/11/19 PHP
php计算两个坐标(经度,纬度)之间距离的方法
2015/04/17 PHP
小程序微信退款功能实现方法详解【基于thinkPHP】
2019/05/05 PHP
NodeJS 模块开发及发布详解分享
2012/03/07 NodeJs
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
很不错的两款Bootstrap Icon图标选择组件
2016/01/28 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
2016/08/08 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
Vue编写多地区选择组件
2017/08/21 Javascript
详解使用React全家桶搭建一个后台管理系统
2017/11/04 Javascript
微信、QQ、微博、Safari中使用js唤起App
2018/01/24 Javascript
JavaScript获取用户所在城市及地理位置
2018/04/21 Javascript
详解html-webpack-plugin插件(用法总结)
2018/09/12 Javascript
vue-cli项目代理proxyTable配置exclude的方法
2018/09/20 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
2018/10/31 Javascript
深入学习JavaScript 高阶函数
2019/06/11 Javascript
[01:56]林书豪DOTA2上海特级锦标赛励志短片
2016/03/05 DOTA
[01:13:46]iG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
centos下更新Python版本的步骤
2013/02/12 Python
Windows 7下Python Web环境搭建图文教程
2018/03/20 Python
django小技巧之html模板中调用对象属性或对象的方法
2018/11/30 Python
Python实现SQL注入检测插件实例代码
2019/02/02 Python
解决python xx.py文件点击完之后一闪而过的问题
2019/06/24 Python
python pandas模块基础学习详解
2019/07/03 Python
Pyspark读取parquet数据过程解析
2020/03/27 Python
什么是python的函数体
2020/06/19 Python
python中加背景音乐如何操作
2020/07/19 Python
美特斯邦威官方商城:邦购网
2016/10/13 全球购物
巴西儿童时尚购物网站:Dinda
2019/08/14 全球购物
构造方法和其他方法的区别
2016/04/26 面试题
北京大学自荐信范文
2014/01/28 职场文书
班长自荐书范文
2014/02/11 职场文书
口才训练演讲稿范文
2014/09/16 职场文书
巾帼文明岗汇报材料
2014/12/24 职场文书
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs