百叶窗效果

需要两个定时器：第一个定时器用来控制每四秒开启第二个定时器

第二个定时器作用：通过控制div的运动，实现百叶窗的效果，也即每100毫秒让一个div向上或向下运动一定的距离，当最后一个div运动完之后，关闭第二个定时器

具体实现看下面的代码

HTML代码

<ul id="ul1">
    <li>
        <div>
            <p>aaaaaaaaa</p>
            <p>bbbbbbbbb</p>
        </div>
    </li>
    <li>
        <div>
            <p>cccccccc</p>
            <p>dddddddd</p>
        </div>
    </li>
    <li>
        <div>
            <p>eeeeeeee</p>
            <p>ffffffff</p>
        </div>
    </li>
    <li>
        <div>
            <p>gggggggg</p>
            <p>hhhhhhhh</p>
        </div>
    </li>
    <li>
        <div>
            <p>iiiiiiii</p>
            <p>jjjjjjjj</p>
        </div>
</li>
    <li>
        <div>
            <p>kkkkkkkk</p>
            <p>llllllll</p>
        </div>
    </li>
</ul>

css代码

<style>
        *{margin:0; padding:0;}
        li{list-style:none;}
        #ul1{width:300px; height:auto;border-top:1px solid #000; margin:20px;}
        li{width:100%; line-height:30px; border-bottom:1px #333 dashed; overflow:hidden; position:relative; height:30px;}
        div{position:absolute; top:-30px;}
        div p{height:30px;}
    </style>

js代码

首先我们需要用到一个运动的框架，框架我之前已经写过，如果有兴趣的请点击​​运动框架​​

<script type="text/javascript" src="move.js"></script>

<script>
 window.onload = function(){
            var oUl = document.getElementById('ul1');
            toShow(oUl);
            function toShow(obj){
                var aDiv = obj.getElementsByTagName('div');
                var iNow =0;
                var iTimer = null;
                var iBtn = true;//设置开关，通过开关决定是div是向下移动还是向上移动
                setInterval(function(){
                    toChange();

                },4000);//开启第一个定时器，让这个百叶窗效果每四秒运动一次
                function toChange(){


                    iTimer = setInterval(function(){//设置第二个定时器，即从第一个到最后一个div每100毫秒运动一个，最后一个运动完成之后关闭这个定时器
                        if(iNow==aDiv.length){
                            clearInterval(iTimer);
                            iNow = 0;
                            iBtn = !iBtn;
                        }else{
                            startMove(aDiv[iNow],{top:iBtn?0:-30});//使用运动框架，让div运动起来
                            iNow++;
                        }

                    },100);

                }

            }
}
</script>

以上就是百叶窗的完整代码。