<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的时候， 就鼠标滑开导致的， 问题是要怎么解呢？
4 回答
stone310
TA贡献361条经验 获得超191个赞
onmouseover改成onmouseenter；
onmouseout改成onmouseleave；
前者会冒泡，你这图片超出了div，移动到图片外的div上时也会再次执行；
后者不会冒泡，移动到图片外的div上时不会再次执行
添加回答
举报
0/150
提交
取消