手风琴,回到顶部,无限运动

手风琴:

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        *{
            margin:0px;
            padding:0px;
        }
            #box{
                width:800px;
                height:300px;
                border:2px solid #ccc;
                position: relative;
                margin:50px auto;
                overflow: hidden;
            }
            #box li{
                width:800px;
                height:300px;
                position: absolute;
                top:0px;
                list-style:none;
            }
        </style>
        <script src="move.js"></script>
        <script>
            window.onload=function(){
                var oBox=document.getElementById("box");
                var aLi=oBox.children;
                var w=30;
                for(var i=1;i<aLi.length;i++){  //设置每个li的left
                    aLi[i].style.left=oBox.offsetWidth-(aLi.length-i)*w+'px';
                }
                for(var i=0;i<aLi.length;i++){
                    aLi[i].index=i;
                    aLi[i].onmouseover=function(){
                        for(var i=0;i<aLi.length;i++){
                            if(i<=this.index){       //小于this.index的向左运动，大于的向右运动
                                move(aLi[i],{left:i*w},{time:1000,easing:'ease-out'})
                            }else{
                                move(aLi[i],{left:oBox.offsetWidth-(aLi.length-i)*w},{time:1000,easing:'ease-out'})
                            }
                        }
                    }
                }
            }
            
        </script>
    </head>
    <body>
            <ul id="box">
                <li ><img src="img/0.jpg"  /></li>
                <li ><img src="img/1.jpg"  /></li>
                <li ><img src="img/2.jpg"  /></li>
                <li ><img src="img/3.jpg"  /></li>
                <li ><img src="img/2.jpg"  /></li>
                <li ><img src="img/1.jpg"  /></li>
            </ul>
    </body>
</html>

 

回到顶部:

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #btn{
                position: fixed;
                left:45%;
                top:45%;
                display: none;
            }
        </style>
        <script>
            window.onload=function(){
                var oBtn=document.getElementById("btn");
                window.onscroll=function(){
                    var scrollT=document.documentElement.scrollTop||document.body.scrollTop;
                    var timer=null;
                    if(scrollT>200){
                        oBtn.style.display='block';
                    }else{oBtn.style.display='none';}
                    oBtn.onclick=function(){
                        var start=scrollT;   //起始位置
                        var dis=0-start;     //总距离
                        var count=parseInt(2000/30);   //运动的总次数
                        var n=0;     //当前运动次数
                        clearInterval(timer);
                        timer=setInterval(function(){
                            n++;
                            var a=1-n/count;   
                            var cur=start+dis*(1-a*a*a);   //减速运动
                            document.documentElement.scrollTop=document.body.scrollTop=cur;
                            if(n==count){
                                clearInterval(timer);
                            }
                        },30);
                    }
                }
            }
        </script>
    </head>
    <body style="height:2000px;">
        <input type="button" id="btn" value="回到顶部"/>
    </body>
</html>

无限运动:

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #box{
                width:150px;
                height:150px;
                border-radius:50%;
                background: red;
                position: absolute;
                left:0;
                top:0px;
            }
            #btn{
                position: absolute;
                top:50px;
                right:50px;
            }
        </style>
        <script src="move.js"></script>
        <script>
            window.onload=function(){
                var oBox=document.getElementById("box");
                var oBtn=document.getElementById("btn");
                var arr=[      //用于存放运动路径
                    {left:0,top:0},
                    {left:500,top:0},
                    {left:500,top:500},
                    {left:0,top:500}
                ];
                var iNow=0;    //下一步路径的下标
                oBtn.onclick=function(){
                    next();
                }    
                function next(){
                    iNow++;      
                    if(iNow==arr.length){iNow=0;}
                    move(oBox,arr[iNow],{time:1000,easing:'ease-out',fn:next});//回调函数里继续执行next来实现循环运动
                }
            }
        </script>
    </head>
    <body>
        <input type="button" id="btn"  value="按钮"/>
        <div id="box"></div>
    </body>
</html>

 

posted @ 2016-07-25 22:03  河南小样  阅读(177)  评论(0)    收藏  举报