鼠标显示大图的效果，类似淘宝(show a enlarge image in mouse hover)

之前发布过一段代码，http://www.cnblogs.com/blodfox777/articles/1208224.html

 

但前不久发现有个重大问题！不支持Firefox！

 

因为window.event在IE和Opera里都是全局变量，而在Firefox中只面向即时触发的事件，所以，我们要将event作为参数传递给方法，才能兼容Firefox，修改后的代码如下，比起原来的代码，缺少了图片跟随鼠标效果，因为用onmousemove事件的话，在Firefox中会造成图片闪烁不停，所以，只能退而求其次，希望高手能搞定这个问题：

 

 

< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head  id ="Head1"  runat ="server" >
     < title > Event </ title >
     < script  type ="text/javascript" >  
     function  showPic(sUrl,evt){ 
      var  x,y; 
     x  =  evt.clientX; 
     y  =  evt.clientY; 
     document.getElementById( " Layer1 " ).style.left  =  x; 
     document.getElementById( " Layer1 " ).style.top  =  y; 
     document.getElementById( " Layer1 " ).innerHTML  =   " <img height=200 width=400 src=\ ""  + sUrl +  " \ " > " ; 
     document.getElementById( " Layer1 " ).style.display  =   " block " ; 
    } 
     function  hiddenPic(){ 
     document.getElementById( " Layer1 " ).innerHTML  =   "" ; 
     document.getElementById( " Layer1 " ).style.display  =   " none " ; 
    } 
     </ script >
</ head >
< body >
     < form  id ="form1"  runat ="server" >
     < div >
         < div  id ="Layer1"  style ="display: none; position: absolute; z-index: 1;" >
         </ div >
         < img  src ="http://forums.asp.net/Themes/FAN/style/i/logo.png"  onmouseout ="hiddenPic();"
            onmouseover ="showPic(this.src,event);"   />
         < p >
         </ p >
     </ div >
     </ form >
</ body >
</ html >

转载于:https://www.cnblogs.com/blodfox777/archive/2008/08/19/1271579.html