分步运动 

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                width:30px;
                height:30px;
                line-height:30px;
                text-align:center;
                border-radius:50%;
                font-size:22px;
                color:#fff;
                background:red;
                opacity:0;
                float:left;
                margin:10px;
            }
        </style>
        <script src="move.js"></script>
        <script>
            window.onload=function(){
                var timer=null;
                var count=0;
                str="BSDBSDBSDBSDBDBSDBSDBSDBSDBSDBSDBSDBSDBSDBSDBDSDBDBDB"
                for(var i=0;i<str.length;i++){  //创建与str个数一样多的div;
                    var oDiv=document.createElement('div');
                    oDiv.innerHTML=str.charAt(i);
                    document.body.appendChild(oDiv);
                }
                var aDiv=document.getElementsByTagName('div');
                timer=setInterval(function(){
                    move(aDiv[count],{opacity:1},{time:1000});//move中的时间必须大于定时器的时间
                    count++;
                    if(count==aDiv.length){
                        clearInterval(timer);  //控制count的大小,不能超出aDiv的length;不然会报错;
                    }
                },100);
            }
        </script>
    </head>
    <body>
    </body>
</html>

 右边栏显示:

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        *{
            margin:0px;
            padding:0px;
        }
            #box{
                height:470px;
                width:200px;
                position: relative;
                left:1170px;
            }
            #box li{
                width:200px;
                height:50px;
                list-style: none;
                overflow: hidden;
                margin-bottom:2px;
                position: absolute;
                right:-150px;
            }
            #box li span{
                width:50px;
                height:50px;
                float:left;
                background: red;
            }
            #box li em{
                width:150px;
                height:50px;
                float:left;
                background: #ccc;
            }
        </style>
        <script src="move.js"></script>
        <script>
            window.onload=function(){
                var oBox=document.getElementById("box")
                var aLi=oBox.getElementsByTagName('li');
                var timer1=null;
                var timer2=null;
                var w=52;
                for(var i=0;i<aLi.length;i++){
                    aLi[i].style.top=i*w+'px';
                }
                oBox.onmouseenter=function(){
                        var count=0;
                         clearInterval(timer1);
                          timer1=setInterval(function(){
                            move(aLi[count],{right:0},{time:200,easing:'ease-out'});
                            count++;
                            if(count==aLi.length){
                                clearInterval(timer1);
                            }
                        },100);
                    }
                oBox.onmouseleave=function(){
                        var count=0;
                         clearInterval(timer2);
                          timer2=setInterval(function(){
                            move(aLi[count],{right:-150},{time:200,easing:'ease-out'});
                            count++;
                            if(count==aLi.length){
                                clearInterval(timer2);
                            }
                        },100);
                    }
                    
            }
        </script>
    </head>
    <body>
        <ul id="box">
            <li><span></span><em></em></li>
            <li><span></span><em></em></li>
            <li><span></span><em></em></li>
            <li><span></span><em></em></li>
            <li><span></span><em></em></li>
            <li><span></span><em></em></li>
            <li><span></span><em></em></li>
            <li><span></span><em></em></li>
            <li><span></span><em></em></li>
        </ul>
    </body>
</html>

 

posted @ 2016-07-25 21:49  河南小样  阅读(132)  评论(0)    收藏  举报