这一节的缓冲好像是有bug的,我的尝试是来回把鼠标移入移出,最后把鼠标再移入的时候,宽度无限延伸,下面是我的代码,求大神指正
<!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>