一个js特效，帮忙完善上，多谢
日期：2014-05-16 浏览次数：20373 次
一个js特效，帮忙完善下，谢谢~
这是用来实现鼠标放到相应区域时，显示对应的汽车标志，我实现了当鼠标在同一个li内移动时图片跟着移动的情况，但是如果移动时鼠标放到了标志显示的div上时，图片就不会跟着鼠标动了，谁能帮忙晚上下啊，谢谢了！
------解决方案--------------------
- HTML code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<style type="text/css">
#outer{
width:490px;
border:1px solid black;
}
ul{
list-style:none;
overflow:hidden;
margin:0;
padding:0;
}
ul li{
cursor:pointer;
height:70px;
width:100px;
float:left;
background:gray;
margin:10px;
border:1px solid black;
text-align:center;
padding-top:30px;
}
#show{
position:absolute;
top:100px;
left:60px;
z-index:2;
display:none;
border:1px solid black;
}
</style>
</head>
<body>
<div id="outer">
<h2 align="center">汽车标志大全</h2>
<ul>
<li>宝马</li>
<li>大众</li>
<li>宝马</li>
<li>大众</li>
<li>宝马</li>
<li>大众</li>
<li>宝马</li>
<li>大众</li>
</ul>
</div>
<div id="show">
<img src="1.jpg" />
</div>
</body>
</html>
<script type="text/javascript">
function showimg(x,y,z){//x,y分别为坐标,z为图片下标
var box=document.getElementById("show");
bx=x+"px";
by=y+"px";
box.style.left=bx;
box.style.top=by;
box.innerHTML="<img src='"+z+".jpg' />";
box.style.display="block";
}
function reshow(x,y){
var box=document.getElementById("show");
bx=x+"px";
by=y+"px";
box.style.left=bx;
box.style.top=by;
}
window.onload=function(){
var lis=document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].index=i;
lis[i].onmouseover=function(e){
x=e.clientX;
y=e.clientY;
showimg(x,y,this.index);
this.onmousemove=function(e){
x1=e.clientX;
y1=e.clientY;
reshow(x1,y1);
}
}
}
}
</script>
这是用来实现鼠标放到相应区域时，显示对应的汽车标志，我实现了当鼠标在同一个li内移动时图片跟着移动的情况，但是如果移动时鼠标放到了标志显示的div上时，图片就不会跟着鼠标动了，谁能帮忙晚上下啊，谢谢了！
------解决方案--------------------
- JScript code
this.onmousemove=function(e)
//修改
this.parentNode.onmousemove=function(e)
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
