效果说明:当鼠标移动到已折叠广告的标题后,折叠当前已展开的广告,并同步展开相应的折叠广告。这种Accordion效果,看似简单,但因为存在动画同步的问题,不能简单地用两个animate()来实现。必须把它做成一个不断循环判断执行的动画。
演示地址:http://frontendcode.sinaapp.com/J-Lui/jQuery-jLaccordion-plugin/
js/jquery.jLaccordion.js:
;(function($){ $.fn.extend({ "jLaccordion":function(){ var timer = null; var $aLi = $(this).find("ul li"); //获取li标签列表对象 var $aSpan = $(this).find("ul li").eq(0).find("span"); //获取一个span标签对象 var liWidth = $(this).find("ul li").eq(0).width(); //获取展开后li标签的宽度 var spanWidth = $aSpan.width() + parseInt($aSpan.css("borderRightWidth").replace("px","")); //获取span标签的宽度(包括有边框) $aLi.mouseover(function(){ var $thisObj = $(this); //存储鼠标当前所在li对象 clearInterval(timer); //清理定时器 timer = setInterval(function(){ //设置定时器,每隔30毫秒对每一个li对象进行判断操作 for(var i = 0; i < $aLi.length; i++){ if($thisObj.width() == liWidth){ //如果鼠标移动到已完全展开的li对象上,则不用进行计算和判断操作 break; } /* 缓冲算法,speed终将变成0 ,所有循环执行完之后的speed之和必将等于当前下标li的移动距离 */ var speed = ($aLi.eq(i).width() - spanWidth)/5; //计算当前下标li对象在该次循环中的移动距离 speed = Math.ceil(speed); if($aLi.eq(i).width() > spanWidth){ $aLi.eq(i).width($aLi.eq(i).width() - speed); $thisObj.width($thisObj.width() + speed); } if($thisObj.width() == liWidth && speed == 0){ clearInterval(timer); } } },30); }); } }) })(jQuery);
index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery手风琴广告展示插件</title> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.jLaccordion.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#show1").jLaccordion(); }); </script> </head> <body> <div id="show1"> <ul> <li class="active"> <span class="bg0">第一个广告标题</span> <a href="#"><img src="images/pic1.png" /></a> </li> <li> <span class="bg1">第二个广告标题</span> <a href="#"><img src="images/pic2.png" /></a> </li> <li> <span class="bg2">第三个广告标题</span> <a href="#"><img src="images/pic3.png" /></a> </li> <li> <span class="bg3">第四个广告标题</span> <a href="#"><img src="images/pic4.png" /></a> </li> <li> <span class="bg2">第五个广告标题</span> <a href="#"><img src="images/pic5.png" /></a> </li> <li> <span class="bg3">第六个广告标题</span> <a href="#"><img src="images/pic6.png" /></a> </li> </ul> </div> </body> </html>
css/style.css:
省略