图片手风琴效果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插件