JS运动框架中关于offsetWidth的一个小bug

最新推荐文章于 2019-02-17 15:30:52 发布

曲奇小姐

最新推荐文章于 2019-02-17 15:30:52 发布

阅读量198

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/weixin_41586886/article/details/81066488

版权

Javascript 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>JS运动框架中关于offsetWidth的一个小bug</title>
    <style>
    div{
      width:300px;
      height: 300px;
      background-color: pink;
      border:1px solid black;
    }
    </style>
  </head>
  <body>
    <div></div>
  </body>
   <script type="text/javascript">
   //这种情况下，我想当然的以为会出现div会慢慢变小的运动效果，但是实际上是这个div在慢慢变宽，原因在于：offsetWidth是包含了
   //border+width+margin的所有宽度，此时的div的offsetWidth是302，也就是说，最开始的width是300，30毫秒后width变成了
   //（302-1）=301px,所以会显现出变大了的效果
   setInterval(function(){
     var oDiv=document.getElementsByTagName('div');
     oDiv[0].style.width=oDiv[0].offsetWidth-1+'px';
   },30);


   //下面这个栗子是正常的，好像没有bug，原因在于速度大于物体的border值，恰好避免了bug的发生
   // var timer=null;
   // function startMove(obj,iTarget){
   //   clearInterval(timer);
   //   timer=setInterval(function(){
   //     var speed=(iTarget-obj.offsetWidth)/6;
   //     speed=speed>0?Math.ceil(speed):Math.floor(speed);
   //     if(obj.offsetWidth==iTarget){
   //       clearInterval(timer);
   //     }
   //     else{
   //       obj.style.width=obj.offsetWidth+speed+'px';
   //     }
   //   },30);
   // }
   // var oDiv=document.getElementsByTagName('div');
   // oDiv[0].οnmοuseοver=function(){
   //   startMove(this,600);
   // }
   // oDiv[0].οnmοuseοut=function(){
   //   startMove(this,300);
   // }

   </script>

</html>