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实现table单双行不同显示并能单行选中
Jul 25 Javascript
JS正则表达式验证数字代码
Jan 28 Javascript
node.js中的fs.readlink方法使用说明
Dec 17 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
Feb 17 Javascript
每日十条JavaScript经验技巧(二)
Jun 23 Javascript
Jquery把获取到的input值转换成json
May 15 jQuery
微信小程序progress组件使用详解
Jan 31 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
Jun 18 Javascript
JS实现页面数据懒加载
Feb 13 Javascript
vue实现整屏滚动切换
Jun 29 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
Jul 19 Javascript
详解JSON.parse和JSON.stringify用法
Feb 18 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
Array of country list in PHP with Zend Framework
2011/10/17 PHP
PHP连接SQLSERVER 注意事项(附dll文件下载)
2012/06/28 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
js chrome浏览器判断代码
2010/03/28 Javascript
基于jquery的时间段实现代码
2012/08/02 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
2013/07/05 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
2013/12/12 Javascript
利用window.name实现windowStorage代码分享
2014/01/02 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
2015/09/26 Javascript
js实现图片轮播效果
2015/12/19 Javascript
简单的分页代码js实现
2016/05/17 Javascript
Angular 封装并发布组件的方法示例
2018/04/19 Javascript
Electron 如何调用本地模块的方法
2019/02/01 Javascript
基于layPage插件实现两种分页方式浅析
2019/07/27 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
2019/10/08 jQuery
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
[00:33]2016完美“圣”典风云人物:BurNIng宣传片
2016/12/10 DOTA
python网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子)
2014/04/25 Python
Python实现简单的可逆加密程序实例
2015/03/05 Python
详解Python中的多线程编程
2015/04/09 Python
浅谈python数据类型及类型转换
2017/12/18 Python
win7下 python3.6 安装opencv 和 opencv-contrib-python解决 cv2.xfeatures2d.SIFT_create() 的问题
2019/10/24 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
浅谈pycharm导入pandas包遇到的问题及解决
2020/06/01 Python
python如何编写win程序
2020/06/08 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
Manduka官网:瑜伽垫、瑜伽毛巾和服装
2018/07/02 全球购物
客户代表实习人员自我鉴定
2013/09/27 职场文书
期末考试动员演讲稿
2014/01/10 职场文书
党支部组织生活会整改方案
2014/09/30 职场文书
党员民主生活会材料
2014/12/15 职场文书
入党团支部推荐意见
2015/06/02 职场文书
清洁工工作总结
2015/08/11 职场文书
小学生反邪教心得体会
2016/01/15 职场文书
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
2021/04/13 Javascript
python基础详解之if循环语句
2021/04/24 Python