球自动朝4个方向滚动,且阴影位置是变化的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>前端ABC-qdabc.cn</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            #wrap{
                width: 800px;
                height: 500px;
                border: 1px solid deeppink;
                margin-left: 10px;
                margin-top: 5px;
                float: left;
            }
            #input1{
                width: 80px;
                margin: 5px auto 5px 10px;
                font-size: 0;
                float: left;
            }
            #div1{
                width: 100px;
                height: 100px;
                background: hotpink;
                position: absolute;
                top: 20px;
                left: 30px;
                border-radius: 100px;
                box-shadow: 0px 5px 5px rgba(0,0,0,.5);
            }
            input{
                width: 100px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                font-size: 18px;
                display: block;
                background: palegreen;
                margin-bottom: 5px;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <div id="div1"></div>
        </div>
        <div id="input1">
                <!--<input type="button" value="向左" id="btn2" />-->
                <input type="button" value="球开始跑" id="btn1"/>
                
                <!--<input type="button" value="向上" id="btn3" />-->
                <!--<input type="button" value="向下" id="btn4"/>-->
            </div>
        <script>
            var oBtn=document.getElementById('btn1');
            var oDiv=document.getElementById('div1');
            
            /*var oBtn2=document.getElementById('btn2');
            var oBtn3=document.getElementById('btn3');
            var oBtn4=document.getElementById('btn4');*/
            /*oBtn4.onclick=function(){
                move(oDiv,10,380,'0px 5px 5px rgba(0,0,0,.5)','top');
            }
            oBtn3.onclick=function(){
                move(oDiv,10,30,'0px -5px 5px rgba(0,0,0,.5)','top');
            }
            oBtn2.onclick=function(){
                move(oDiv,10,40,'-5px 5px 5px rgba(0,0,0,.5)','left');
            }*/
            
            function fn(){
                    move(oDiv,10,680,'5px 5px 5px rgba(0,0,0,.5)','left',function(){
                        move(oDiv,10,380,'0px 5px 5px rgba(0,0,0,.5)','top',function(){
                            move(oDiv,10,40,'-5px 5px 5px rgba(0,0,0,.5)','left',function(){
                                move(oDiv,10,30,'0px -5px 5px rgba(0,0,0,.5)','top');
                            });
                        });
                    });
            }
            var t=null;
            oBtn.onclick=function(){
                fn();
                clearInterval(t);
                t=setInterval(fn,6000);
            }
            function move(obj,val,target,bs,dir,endFn){
                val=parseInt(getStyle(obj,dir))<target?val:-val;
                obj.style.boxShadow=bs;
                clearInterval(obj.timer);
                obj.timer=setInterval(function(){
                    var speed=parseInt(getStyle(obj,dir))+val;
                    if(speed>=target&&val>0 || speed<=target&&val<0){
                        speed=target;
                    } 
                    obj.style[dir]=speed+'px';
                    if(speed==target){
                        clearInterval(obj.timer);
                        endFn&&endFn();
                    }
                },30);
            }
            
            function getStyle(obj,sty){
                return obj.currentStyle?obj.currentStyle[sty]:getComputedStyle(obj)[sty];
            }
        </script>
    </body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » 球自动朝4个方向滚动,且阴影位置是变化的

赞 (2)
分享到:更多 ()

发表评论 0