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

之前发布过一段代码，http://chuna2.787528.xyz/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>
posted @ 2008-08-19 17:24  LanceZhang  阅读(2673)  评论(3)    收藏  举报