鼠标放上DIV，里面的图片左移20px,鼠标放开后，图片恢复不了原位的原因
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
* { margin:0; padding:0;}
#div1 { width:200px; height:200px; background:#0066CC; margin-left:100px; position:relative;}
img { position:absolute; left:100px;}
</style>
<script>
window.onload=function (){
div1=document.getElementById("div1");
img1=document.getElementById("img1");
div1.onmouseover=function() {startmove(img1,"left",-20);}
div1.onmouseout=function(){startmove(img1,"left",20);}
}
function startmove(obj,attr,num){
var timer;
clearInterval(obj.timer);
var a=0,speed;
num>0?speed=1:speed=-1;
obj.timer=setInterval(function(){
if(a==num) {clearInterval(timer);}
else{
obj.style[attr]= parseInt(getStyle(obj,attr))+speed+"px"; a=a+speed;
}
}
,20);
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
</script>
</head>
<body>
<div id="div1">
<h1>插入图片</h1>
<img id="img1" src="pic5.gif" />
</div>
</body>
</html>
想实现的效果：鼠标放上DIV，里面的图片左移20px,鼠标放开后，图片回复到开始的位置。
现在的问题是，如果鼠标迅速滑过会出现img1回开始位置 的时候跑出DIV的问题，鼠标如果在DIV内停久一点就正常)
原因我知道， 是 a 还没有到20的时候， 就鼠标滑开导致的， 问题是要怎么解呢？
rainy_li36765984回答
-
stone310
onmouseover改成onmouseenter；onmouseout改成onmouseleave；前者会冒泡，你这图片超出了div，移动到图片外的div上时也会再次执行；后者不会冒泡，移动到图片外的div上时不会再次执行
随时随地看视频慕课网APP
相关分类
JavaScript