<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
height: 200px;
width: 100px;
background-color: red;
margin: 20px;
float: left;
}
</style>
<script type="text/javascript">
window.onload = function() {
var dv = document.getElementsByTagName('div');
//给DIV绑定鼠标移入事件
for(var i=0;i<dv.length;i++){
dv[i].timer = null;
dv[i].onmouseover = function(){
starMove(this,'width',500)
}
}
//创建一个获取外部样式的函数
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else {
return getComputedStyle(obj,false)[name];
}
}
//运动函数
function starMove(obj,atr,target){
clearInterval(obj.timer);
var cur = parseInt(getStyle(obj,atr))
obj.timer = setInterval(function(){
var speed = (target - cur)/6;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(cur==target){
clearInterval(obj.timer)
}else {
obj.style[atr] = cur + speed +'px';
}
},30);
}
}
</script>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
</html>运行后无法正确执行运动= = 定时器只能执行一次 就只移动一下 再移入还是会移动 最终会到500 球各位大神找下错误 感激不尽
2 回答
已采纳
OlderSkee
TA贡献123条经验 获得超103个赞
因为你虽然有定时器，但是函数仍然只执行一次，
在46 - 47 之间加入
starMove(obj,atr,target);
就ok了。
另外你这种递归调用，用setTimeout比setInterval性能应该要好一些。
当然，效果是一样的。 记得清除也换成clearTimeout。
添加回答
举报
0/150
提交
取消