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 相关文章推荐
百度 popup.js 完美修正版非常的不错 脚本之家推荐
Apr 17 Javascript
javascript获得服务器端控件的ID的实现代码
Dec 28 Javascript
window.open 以post方式传递参数示例代码
Feb 27 Javascript
js判断文本框输入的内容是否为数字
Dec 23 Javascript
微信小程序 登录的简单实现
Apr 19 Javascript
基于JavaScript实现评论框展开和隐藏功能
Aug 25 Javascript
React如何解决fetch跨域请求时session失效问题
Nov 02 Javascript
vue实现微信二次分享以及自定义分享的示例
Mar 20 Javascript
深入了解Hybrid App技术的相关知识
Jul 17 Javascript
使用layui前端框架弹出form表单以及提交的示例
Oct 25 Javascript
Javascript Web Worker使用过程解析
Mar 16 Javascript
Nuxt.js 静态资源和打包的操作
Nov 06 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实现单链表的实例代码
2013/03/22 PHP
如何使用php实现评委评分器
2015/07/31 PHP
深入浅析yii2-gii自定义模板的方法
2016/04/26 PHP
jQueryUI的Dialog的简单封装
2010/06/07 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
2011/05/06 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
2012/05/23 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
2015/03/03 Javascript
js控制多图左右滚动切换效果代码分享
2015/08/26 Javascript
xtemplate node.js 的使用方法实例解析
2016/08/22 Javascript
JavaScript中的call和apply的用途以及区别
2017/01/11 Javascript
简单实现bootstrap导航效果
2017/02/07 Javascript
Vue中$refs的用法详解
2018/06/24 Javascript
Vue.js 图标选择组件实践详解
2018/12/03 Javascript
使用JavaScript保存文本文件到本地的两种方法
2019/01/22 Javascript
[06:45]DOTA2卡尔工作室 英雄介绍幻影长矛手篇
2013/07/12 DOTA
[01:00:35]2018DOTA2亚洲邀请赛3月30日B组 EffcetVSMineski
2018/03/31 DOTA
python更新列表的方法
2015/07/28 Python
Python作用域用法实例详解
2016/03/15 Python
Tensorflow实现将标签变为one-hot形式
2020/05/22 Python
python3 os进行嵌套操作的实例讲解
2020/11/19 Python
css3 实现圆形旋转倒计时
2018/02/24 HTML / CSS
配置H5的滚动条样式的示例代码
2018/03/09 HTML / CSS
COACH德国官方网站:纽约现代奢侈品牌,1941年
2018/06/09 全球购物
小学家长会邀请函
2014/01/23 职场文书
家长给小学生的评语
2014/01/30 职场文书
年度献血先进个人事迹材料
2014/02/14 职场文书
优秀辅导员事迹材料
2014/02/16 职场文书
购房意向书范本
2014/04/01 职场文书
会计学自荐信
2014/06/03 职场文书
中队活动总结
2014/08/27 职场文书
2014大学生职业生涯规划书最新范文
2014/09/13 职场文书
贯彻落实“八项规定”思想汇报
2014/09/13 职场文书
劳动仲裁撤诉申请书
2015/05/18 职场文书
团组织推荐意见
2015/06/05 职场文书
详解PHP设计模式之依赖注入模式
2021/05/25 PHP
PYTHON使用Matplotlib去实现各种条形图的绘制
2022/03/22 Python