学习js运动多个物体宽度变化笔记

来源：互联网发布：淘宝网能用货到付款编辑：程序博客网时间：2024/06/02 04:17

功能：实现鼠标移入物体宽度缓冲式的增加，移出缓冲式的还原

<!DOCTYPE html>

<head>

<title>多个物体宽度变化</title>

<style>

div {width:100px; height:50px; background:#000; margin:10px;}

</style>

window.onload=function ()

{

var aDiv=document.getElementsByTagName('div'); //获取每个div对象

for(var i=0;i<aDiv.length;i++) //为每个对象设置鼠标移入移出事件

{

aDiv[i].onmouseover=function ()

{

startMove(this, 400); //this当前对象

};

aDiv[i].onmouseout=function ()

{

startMove(this, 100);

};

}

};

var timer=null;

function startMove(obj, iTarget)

{

clearInterval(timer); //运动之前需先关闭定时器

timer=setInterval(function (){ //打开定时器每30秒执行一次函数

var speed=(iTarget-obj.offsetWidth)/6; //设置变化的快慢

speed=speed>0?Math.ceil(speed):Math.floor(speed); //缓冲变化必须取整Math.ceil()向上Math.floor()向下

if(obj.offsetWidth==iTarget) //判断宽度与目标值

{

clearInterval(timer);

}

else

{

obj.style.width=obj.offsetWidth+speed+'px';

}

}, 30);

}

</script>

</head>

<body>

</body>

</html>

问题：当鼠标快速在几个图形上移动时，无法实现移出后宽度还原

解决办法：

为每个div设置单独的定时器

将var timer=null;改为aDiv[i].timer=null;并放入循环中为每个div设置定时器，使用定时器时也设置为obj.timer

0 0