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 相关文章推荐
海量经典的jQuery插件集合
Jan 12 Javascript
js onmousewheel事件多次触发问题解决方法
Oct 17 Javascript
深入分析JSON编码格式提交表单数据
Jun 25 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
Nov 15 Javascript
jQuery选择器用法实例详解
Dec 17 Javascript
JavaScript中的原型继承基础学习教程
May 06 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
May 10 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
Apr 04 Javascript
echart简介_动力节点Java学院整理
Aug 11 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
JavaScript实现简单计时器
Jun 22 Javascript
Promise静态四兄弟实现示例详解
Jul 07 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
PHP独立Session数据库存储操作类分享
2014/06/11 PHP
php在线解压ZIP文件的方法
2014/12/30 PHP
php计算给定日期所在周的开始日期和结束日期示例
2017/02/06 PHP
Laravel中批量赋值Mass-Assignment的真正含义详解
2017/09/29 PHP
PHP实现正则匹配所有括号中的内容
2018/06/22 PHP
Laravel框架控制器的request与response用法示例
2019/09/30 PHP
用一段js程序来实现动画功能
2007/03/06 Javascript
解析js如何获取当前url中的参数值并复制给input
2013/06/23 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
2013/10/12 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
2014/04/30 Javascript
浅析javascript操作 cookie对象
2014/12/26 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
2015/04/13 Javascript
JS中完美兼容各大浏览器的scrolltop方法
2015/04/17 Javascript
基于JavaScript实现树形下拉框
2016/08/10 Javascript
微信小程序实现导航栏选项卡效果
2020/06/19 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
2018/08/22 Javascript
layui 监听select选择 获取当前select的ID名称方法
2019/09/24 Javascript
[08:54]DOTA2-DPC中国联赛 正赛 Aster vs LBZS 选手采访
2021/03/11 DOTA
Python tempfile模块学习笔记(临时文件)
2014/05/25 Python
python分析网页上所有超链接的方法
2015/05/08 Python
10个Python小技巧你值得拥有
2018/09/29 Python
实例详解Python装饰器与闭包
2019/07/29 Python
基于python判断目录或者文件代码实例
2019/11/29 Python
Python WebSocket长连接心跳与短连接的示例
2020/11/24 Python
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
2019/07/18 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
2019/12/03 HTML / CSS
加拿大女装网上购物:Reitmans
2016/10/20 全球购物
Perfumetrader荷兰:香水、化妆品和护肤品在线商店
2017/09/15 全球购物
巴西体育用品商店:Lojão dos Esportes
2018/07/21 全球购物
总经理助理职责
2014/02/04 职场文书
个人近期表现材料
2014/02/11 职场文书
争当四好少年演讲稿
2014/09/13 职场文书
一年级数学上册复习计划
2015/01/17 职场文书
担保书范文
2015/01/20 职场文书
居安思危观后感
2015/06/11 职场文书
使用pandas模块实现数据的标准化操作
2021/05/14 Python