慕粉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)
}
好的 ok
JS动画效果
113920 学习 · 1450 问题
相似问题