鼠标移出时,使offsetLeft为0的另一种方法

来源:2-2 JS透明度动画

慕粉3122678

2018-05-30 17:27

var timer = null;


window.onload = function(){

  var oDiv = document.getElementById('div1');

  var oDiv2 = document.getElementById('div2');

  oDiv.onmouseover = function(){

    Move(0);

  }

  oDiv.onmouseout = function(){

    Move(-200);

  }

}


//鼠标移入,模块右移;鼠标移出,模块左移

function Move(iTarget){

  var oDiv = document.getElementById('div1');

  //onmouseover、onmouseout事件发生时,首先清空全局定时器timer,以免定时器叠加

  clearInterval(timer);

  var speed = 0;

  //匀速运动:初始右侧,目标左侧,速度为负;初始左侧,目标右侧,速度为正

  // if (oDiv.offsetLeft > iTarget) {

  //     speed = -1;

  //   }else{

  //     speed = 1;

  //   }

  //定时器工作,移动模块

  timer = setInterval(function(){

    //速度由快到慢:随着定时器工作,(目标值-当前值)越来越小

    if (oDiv.offsetLeft > iTarget) {

      speed = Math.floor((iTarget - oDiv.offsetLeft)/10);

      console.log(speed);

    }else{

      speed = Math.ceil((iTarget - oDiv.offsetLeft)/10);

      console.log(speed);


    }

    

    //到达目标,清除定时器;否则定时器继续工作

    if (oDiv.offsetLeft == iTarget) {

      clearInterval(timer);

    }else{

      oDiv.style.left = oDiv.offsetLeft + speed + 'px';

    }

  },10)

}

写回答 关注

1回答

  • qq_独为伊人醉_2
    2018-06-01 13:09:21

    好的 ok

JS动画效果

通过本课程JS动画的学习,从简单动画开始,逐步深入各种动画框架封装

113920 学习 · 1450 问题

查看课程

相似问题