jQuery手风琴广告展示插件

效果说明：当鼠标移动到已折叠广告的标题后，折叠当前已展开的广告，并同步展开相应的折叠广告。这种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：

省略
posted @ 2013-07-28 17:08  J-Lui  阅读(414)  评论(0)  编辑  收藏  举报