小黄练编程 发表于 2022-4-7 20:45:21

为啥盒子不移动啊,

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title>动画函数封装</title>
                <style>
                div{
                        width:100px;
                        height:100px;
                        background-color:gold;
                }
               
                </style>
        </head>
       
       
        <body>
                <div>1</div>
                <button>点击移动盒子</button>
                <script>
                var div=document.querySelector('div');
                functionanimate(obj,target,callback){
                        clearInterval(obj.timer);
                        obj.timer=setInterval(function(){
                                var step=(target-obj.offsetLeft)/10;
                                step=step>0?Math.ceil(step):Math.floor(step);
                                if(obj.offsetLeft==target){
                                        clearInterval(obj.timer);
                                        if(callback){
                                       callback();
                                        }
                                }
                                obj.style.left=obj.offsetLeft+step+'px';
                        },1);

                }
               
                div.addEventListener('click',function(){
                        animate(div,800);
                        alert('美好');
                });
                </script>
        </body>
</html>

ba21 发表于 2022-4-7 21:45:20

div{
                  position:absolute;
                        width:100px;
                        height:100px;
                        background-color:gold;
                }
页: [1]
查看完整版本: 为啥盒子不移动啊,