鱼C论坛

 找回密码
 立即注册
查看: 2949|回复: 1

[已解决]为啥盒子不移动啊,

[复制链接]
发表于 2022-4-7 20:45:21 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>动画函数封装</title>
  6.                 <style>
  7.                 div{
  8.                         width:100px;
  9.                         height:100px;
  10.                         background-color:gold;
  11.                 }
  12.                
  13.                 </style>
  14.         </head>
  15.        
  16.        
  17.         <body>
  18.                 <div>1</div>
  19.                 <button>点击移动盒子</button>
  20.                 <script>
  21.                 var div=document.querySelector('div');
  22.                 function  animate(obj,target,callback){
  23.                         clearInterval(obj.timer);
  24.                         obj.timer=setInterval(function(){
  25.                                 var step=(target-obj.offsetLeft)/10;
  26.                                 step=step>0?Math.ceil(step):Math.floor(step);
  27.                                 if(obj.offsetLeft==target){
  28.                                         clearInterval(obj.timer);
  29.                                         if(callback){
  30.                                          callback();
  31.                                         }
  32.                                 }
  33.                                 obj.style.left=obj.offsetLeft+step+'px';
  34.                         },1);

  35.                 }
  36.                
  37.                 div.addEventListener('click',function(){
  38.                         animate(div,800);
  39.                         alert('美好');
  40.                 });
  41.                 </script>
  42.         </body>
  43. </html>
复制代码
最佳答案
2022-4-7 21:45:20
div{
                    position:absolute;
                        width:100px;
                        height:100px;
                        background-color:gold;
                }
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

发表于 2022-4-7 21:45:20 | 显示全部楼层    本楼为最佳答案   
div{
                    position:absolute;
                        width:100px;
                        height:100px;
                        background-color:gold;
                }
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-5-5 01:46

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表