一个js特效，帮忙完善下，谢谢~
<!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>this.onmousemove=function(e)//修改this.parentNode.onmousemove=function(e)