这一节的缓冲好像是有bug的，我的尝试是来回把鼠标移入移出，最后把鼠标再移入的时候，宽度无限延伸，下面是我的代码，求大神指正
qq_苏慕遮_24019744
2016-10-13 10:50
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{padding: 0;margin: 0;}
div{
width: 200px;
height: 200px;
background: red;
border:1px solid black;
/*font-size:12px;*/
color: white;}
</style>
<script>
window.onload=function(){
var div=document.getElementById('div1');
div.onmouseover=function(){
move(this,400);
}
div.onmouseout=function(){
move(this,200);
}
}
var timer=null;
function move(obj,iTarget){
var speed=(iTarget-parseInt(getstyle(obj,'width')))/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
clearInterval(timer);
timer=setInterval(function(){
if(parseInt(getstyle(obj,'width'))==iTarget){
clearInterval(timer);
}
else{
obj.style.width=parseInt(getstyle(obj,'width'))+speed+'px';
}
},50);
}
function getstyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
</script>
</head>
<body>
<div id="div1" ></div>
</body>
</html>
2回答
-
- qq_要D大调_0
- 2016-12-24 16:26:41
我也想知道
-
- qq_苏慕遮_24019744
- 2016-10-13 11:22:39
这是我自己的问题，。。。。。把speed变量放到循环里面就没这个bug了，求大手解答一下原因
JS动画效果
113923 学习 · 1443 问题
相似问题