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 相关文章推荐
ppk谈JavaScript style属性
Oct 10 Javascript
页面版文本框智能提示JS代码
Nov 20 Javascript
JSQL 基于客户端的成绩统计实现方法
May 05 Javascript
jQuery版Tab标签切换
Mar 16 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
Apr 06 Javascript
简述jQuery ajax的执行顺序
Jan 05 Javascript
在JavaScript中使用JSON数据
Feb 15 Javascript
表单中单选框添加选项和移除选项
Jul 04 Javascript
JS for循环中i++ 和 ++i的区别介绍
Jul 20 Javascript
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
vue实现文章内容过长点击阅读全文功能的实例
Dec 28 Javascript
详解JavaScript的BUG和错误
May 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
计算2000年01月01日起到指定日的天数
2006/10/09 PHP
php下保存远程图片到本地的办法
2010/08/08 PHP
PHP常用特殊运算符号和函数总结(php新手入门必看)
2013/02/02 PHP
PHP中spl_autoload_register()和__autoload()区别分析
2014/05/10 PHP
php绘制一条直线的方法
2015/01/24 PHP
php如何计算两坐标点之间的距离
2018/12/29 PHP
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
2014/05/19 Javascript
js获取滚动距离的方法
2015/05/30 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
Angular2 环境配置详细介绍
2016/09/21 Javascript
jQuery实现模拟flash头像裁切上传功能示例
2016/12/11 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
vue-cli脚手架引入图片的几种方法总结
2018/03/13 Javascript
JS实现的base64加密解密操作示例
2018/04/18 Javascript
JS中判断字符串存在和非空的方法
2018/09/12 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
2019/05/12 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
2019/05/13 Javascript
[01:54]胎教DOTA2 准妈妈玩家现身中国区预选赛
2016/06/26 DOTA
python实现将读入的多维list转为一维list的方法
2018/06/28 Python
python采集微信公众号文章
2018/12/20 Python
Python多线程获取返回值代码实例
2020/02/17 Python
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
加拿大在线隐形眼镜专家:PerfectLens.ca
2016/11/19 全球购物
女性时尚网购:Chic Me
2019/07/30 全球购物
德国前卫设计师时装在线商店:Luxury Loft
2019/11/04 全球购物
计算机系毕业生推荐信
2013/11/06 职场文书
销售顾问的岗位职责
2013/11/13 职场文书
业务员辞职信范文
2015/03/02 职场文书
2015年光棍节活动总结
2015/03/24 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
签约仪式致辞
2015/07/30 职场文书
英语教学课后反思
2016/02/15 职场文书
Pandas 稀疏数据结构的实现
2021/07/25 Python
浅谈Node的内存泄露问题
2022/05/06 NodeJs