如何在FF下实现这个鼠标移动显示层 跟随鼠标移动的效果

如题 鼠标移动显示层  然后跟随鼠标移动   
能在IE下跑 但是在FF下 跑步了 哪位高人帮我看下吧 谢谢了<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
    <style type="text/css">
    #div1{
display:none;
font-size:12px;
line-height:18px;
border:0px solid #e1e3e2;
width:250;
height:50;
padding: 5px;
} 
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div><a onmousemove="showTip()" onmouseout="closeTip()">撒开多极化速度咖啡壶看对方</a>
    </div>
    <div id="div1">
        <img alt="" src="image/diceng.jpg" /></div>
    </form>
</body>
</html>
<script type="text/javascript">
function showTip() 
{ 
var div1 = document.getElementById('div1'); //将要弹出的层 
div1.style.display="block"; //div1初始状态是不可见的，设置可为可见 
//window.event代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状. 
//clientX是鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 
div1.style.left=event.clientX+10; //鼠标目前在X轴上的位置，加10是为了向右边移动10个px方便看到内容 
div1.style.top=event.clientY+5; 
div1.style.position="absolute"; //必须指定这个属性，否则div1层无法跟着鼠标动 
}//关闭层div1的显示 
function closeTip() 
{ 
var div1 = document.getElementById('div1'); 
div1.style.display="none"; 
} 
</script>

解决方案 »

  1.   


    <html>
    <head>
        <title>无标题页</title>
        <style type="text/css">
         #div1{
    display:none;
    font-size:12px;
    line-height:18px;
    border:0px solid #e1e3e2;
    width:250;
    height:50;
    padding: 5px;
    } 
        </style>
        
        <script type="text/javascript">
    function showTip(e) { //在调用方法的时候将event传过来，ie中可以不传event，ff不传就不行了
    var event = e || window.event;//兼容浏览器
    var div1 = document.getElementById('div1'); //将要弹出的层 
    div1.style.display = "block"; //div1初始状态是不可见的，设置可为可见 
    //window.event代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状. 
    //clientX是鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 
    div1.style.left=event.clientX+10; //鼠标目前在X轴上的位置，加10是为了向右边移动10个px方便看到内容 
    div1.style.top=event.clientY+5; 
    div1.style.position="absolute"; //必须指定这个属性，否则div1层无法跟着鼠标动 
    }

    //关闭层div1的显示 
    function closeTip() { 
    var div1 = document.getElementById('div1'); 
    div1.style.display = "none"; 
    } 
    </script>
    </head>
    <body>
        <form id="form1">
        <div>
         <!-- showTip(event)这里的event是固定的这样写的 -->
    <a onmousemove="showTip(event)" onmouseout="closeTip()">撒开多极化速度咖啡壶看对方</a>
        </div>
        <div id="div1">
            <img alt="" src="image/diceng.jpg" style="border: 1px solid red; width: 100px; height: 100px;"/></div>
        </form>
    </body>
    </html>
      

  2.   


    div1.style.left = event.clientX + 10 + "px"; 
    div1.style.top =event.clientY + 5 + "px";
    在ff中需要加px这样就好使了，不然坐标不对
      

  3.   

    问题解决了
    代码如下 
    div1.style.left=event.clientX+document.body.scrollLeft - document.body.clientLeft; div1.style.top=event.clientY+document.body.scrollTop  - document.body.clientTop;