彩世界平台-彩世界时时app-彩世界开奖app苹果下载

热门关键词: 彩世界平台,彩世界时时app,彩世界开奖app苹果下载

您的位置:彩世界平台 > 学会党委 > jquery插件开发之实现jquery手风琴功能分享

jquery插件开发之实现jquery手风琴功能分享

发布时间:2019-09-03 00:25编辑:学会党委浏览(93)

    可用于图片或者容器,使用与常规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支持,参数可参考[email protected]
             */
            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等。

    ...

    本文由彩世界平台发布于学会党委,转载请注明出处:jquery插件开发之实现jquery手风琴功能分享

    关键词:

上一篇:用IE重起计算机或者关机的示例代码

下一篇:没有了