图片手风琴效果jQuery插件

  图片手风琴效果jQuery插件,要使用本插件需奥导入jquery框架。效果和源代码如下

图片手风琴效果jQuery插件

 

图片手风琴效果jQuery插件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="/js/jquery.js"></script>
<title>图片手风琴效果jQuery插件</title>
<script type="text/javascript">
    window.onload = function () {
        (function ($) {
            $.extend($.easing, { backout: function (x, t, b, c, d) { var s = 1.70158; return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b } });
            //cfg配置项
            //dir:展开方向,取决于你的图片形状。默认水平:1,2:垂直
            //WorH:图片的宽度/高度,参考dir的配置,水平展开[1]则为图片的高度,否则为宽度,默认150
            //openWorH:展开图片宽度/高度,参考dir的配置,水平展开[1]为图片的宽度,否则为高度,默认300
            //closeWorH:未展开的图片宽度/高度,默认50px。
            //openIndex:展开哪张图片,默认为1,展开第一张
            //delay:播放的间隔,默认为0不自动播放,传递大于0的数字启动自动播放,单位:毫秒
            //aDelay:图片展开动画间隔,默认800,单位:毫秒
            //fx:动画插除效果,默认backout。有需要自己扩展$.easing【还可以设置为jQuery默认的提供的“linear,swing”2种效果】
            $.fn.accordion = function (cfg) {
                cfg = $.extend({ dir: 1, WorH: 150, openWorH: 300, closeWorH: 50, openIndex: 1, delay: 0, aDelay: 200, fx: 'backout' }, cfg);
                var h = cfg.dir == 1, key = h ? 'width' : 'height';
                return this.each(function () {
                    var me = $(this), lis = me.find('li'), lisLen = lis.size(), totalWorH = (lisLen - 1) * cfg.closeWorH + cfg.openWorH
                    , openIndex = cfg.openIndex, idx, timer;
                    if (openIndex > lisLen || openIndex < 1) openIndex = 0;
                    else openIndex -= 1;
                    me.css({ width: h ? totalWorH : cfg.WorH, height: h ? cfg.WorH : totalWorH });
                    me.find('img').css({ width: h ? cfg.openWorH : cfg.WorH, height: h ? cfg.WorH : cfg.openWorH });
                    lis.css('width', function (idx) {
                        if (idx == openIndex) return h ? cfg.openWorH : cfg.WorH; return h ? cfg.closeWorH : cfg.WorH;
                    }).css('height', function (idx) {
                        if (idx == openIndex) return h ? cfg.WorH : cfg.openWorH; return h ? cfg.WorH : cfg.closeWorH;
                    });
                    function doAnimate(li) {
                        if (li == undefined) {
                            openIndex++;
                            if (openIndex >= lisLen) openIndex = 0;
                            li = lis.eq(openIndex);
                        } else {
                            idx = li.index();
                            if (idx == openIndex) return;
                            openIndex = idx;
                        }
                        lis.each(function (idx) {
                            var aCfg = {};
                            aCfg[key] = idx == openIndex ? cfg.openWorH : cfg.closeWorH;
                            $(this).dequeue("fx").animate(aCfg, cfg.aDelay, cfg.fx);
                        });
                    }
                    lis.mouseenter(function () {
                        clearInterval(timer);
                        doAnimate($(this));
                    }).mouseleave(function () { if (cfg.delay) timer = setInterval(function () { doAnimate(); }, cfg.delay); });
                    if (cfg.delay) timer = setInterval(function () { doAnimate(); }, cfg.delay);
                });
            }
        })(jQuery);
        $('#accordionH').accordion({ fx: 'linear', delay: 6000 });
        $('#accordionV').accordion({ dir: 2, openIndex: 1 });
    }
</script>
<style type="text/css">
.accordion{overflow:hidden;zoom:1;}
.accordion ul,.accordion li,ul{margin:0px;padding:0px;list-style:none;overflow:hidden;}
.accordion li{float:left;}
.accordion li img{border:none;vertical-align:top;/*fixed li嵌套img会多出4px垂直空白边问题*/}
</style>
</head>
<body>
水平方向手风琴效果+6s自动播放
<div id="accordionH" class="accordion">
<ul>
<li><a href="/"><img src="/imgdesign/20120928/20120928164213345_s.jpg" alt="水平方向图片手风琴效果"/></a></li>
<li><a href="/"><img src="/imgdesign/20120928/20120928165556713_s.jpg" alt="水平方向图片手风琴效果"/></a></li>
<li><a href="/"><img src="/imgdesign/20120928/20120928170450739_s.jpg" alt="水平方向图片手风琴效果"/></a></li>
<li><a href="/"><img src="/imgdesign/20120912/20120912095403510_s.jpg" alt="水平方向图片手风琴效果"/></a></li>
<li><a href="/"><img src="/imgdesign/20120912/20120912094744433_s.jpg" alt="水平方向图片手风琴效果"/></a></li>
<li><a href="/"><img src="/imgdesign/20120515/20120515170839796_s.jpg" alt="水平方向图片手风琴效果"/></a></li>
</ul>
</div>
垂直方向手风琴效果
<div id="accordionV" class="accordion">
<ul>
<li><a href="/"><img src="/imgdesign/20100527/2010527154349225_s.jpg" alt="垂直手风琴效果"/></a></li>
<li><a href="/"><img src="/imgdesign/20100406/201046172817881_s.jpg" alt="垂直手风琴效果"/></a></li>
<li><a href="/"><img src="/imgdesign/20100527/2010527154105487_s.jpg" alt="垂直手风琴效果"/></a></li>
<li><a href="/"><img src="/imgdesign/20100406/201046172732128_s.jpg" alt="垂直手风琴效果"/></a></li>
</ul>
</div>
</body>
</html>

 

加支付宝好友偷能量挖...


原创文章,转载请注明出处:图片手风琴效果jQuery插件

评论(0)Web开发网
阅读(209)喜欢(0)JavaScript/Ajax开发技巧