一个图像通过setinterval匀速移动的javascript特效问题
一个图像通过setinterval匀速移动到一个地方,到达后只要鼠标一丁点动作,图像居然回到原点像刚才那样重新移动过来,这什么原因?<body><ul><liid="10...
一个图像通过setinterval匀速移动到一个地方,到达后只要鼠标一丁点动作,图像居然回到原点像刚才那样重新移动过来,这什么原因?
<body>
<ul>
<li id="10">首页</li>
<li id="100">日志</li>
<li id="190">说说</li>
<li id="280">音乐</li>
<li id="370">留言板</li>
<img src="未标题-1.png" id="tp" style="left:10px;" />
</ul>
<script type="text/javascript">
document.getElementById("370").onmouseover=function()
{
yc=setInterval("yd()",1);
}
document.getElementById("370").onmouseout=function()
{document.getElementById("tp").style.left=10+"px";yc=clearInterval(yc);};
function yd()
{
document.getElementById("tp").style.left=parseInt(document.getElementById("tp").style.left)+10+"px";
if(parseInt(document.getElementById("tp").style.left)>=370)
{yc=clearInterval(yc)}
}
</script>
</body>
会不会是z-index属性问题? 展开
<body>
<ul>
<li id="10">首页</li>
<li id="100">日志</li>
<li id="190">说说</li>
<li id="280">音乐</li>
<li id="370">留言板</li>
<img src="未标题-1.png" id="tp" style="left:10px;" />
</ul>
<script type="text/javascript">
document.getElementById("370").onmouseover=function()
{
yc=setInterval("yd()",1);
}
document.getElementById("370").onmouseout=function()
{document.getElementById("tp").style.left=10+"px";yc=clearInterval(yc);};
function yd()
{
document.getElementById("tp").style.left=parseInt(document.getElementById("tp").style.left)+10+"px";
if(parseInt(document.getElementById("tp").style.left)>=370)
{yc=clearInterval(yc)}
}
</script>
</body>
会不会是z-index属性问题? 展开
1个回答
展开全部
和z轴没关系,你的函数就是这个效果,鼠标悬停在“留言板”上时,图像移动,移动到位置就停下;鼠标离开“留言板”,图像回到原点。如果再次悬停在“留言板”上时,图像移动,如果不在“留言板”上,不会再次移动
追问
我在留言板上稍微移动一下都那个,结果真是z-index问题。
A图像侦听着onmouseover和onmouseout,而这张图像上还有一张图片B,鼠标在其AB上面移动,A捕获到哪个事件?
追答
那就是你的代码没发全,应该是事件冒泡,由该位置最底层元素触发事件,一路触发到最上层。比如,这样,事件就会被触发三次,一次,一次,一次
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询