为了账号安全,请及时绑定邮箱和手机立即绑定

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

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 回答

好的 ok

1 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

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

我要回答 关注问题
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号