div如何定位到鼠标附近

以前乱写的个 里面的全文应该是ajax读出的数据,当然你也可以当参数传了,如果不是很长
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
<style type="text/css"> 
<!-- 
.a{
line-height:18px;
font-size:12px;    
background:#ffffff; 
width:200px; 
height:205px; 
position:absolute; 
border-right:1px solid #0066FF; 
border-bottom:1px solid #0066FF; 
border-top:1px solid #0066FF; 
border-left:1px solid #0066FF;
 } 
.a1 
{ height:180px;
padding:10px;} 
.a2 
{ background:#0066FF; 
height:25px;}    
--> 
</style> 
<script>
var oo=true
function create(e){
e=e||event
if(oo==true)
{var div1 =document.createElement("div")
div1.className="a"
div1.id="cantion"
document.body.appendChild(div1)
var div2 =document.createElement("div")
div2.className="a1"
div2.innerHTML="XXXX"
div1.appendChild(div2)
var div3 =document.createElement("div")
div3.className="a2"
div1.appendChild(div3)
oo=false}
document.getElementById("cantion").style.left=e.clientX+8+"px" 
document.getElementById("cantion").style.top=e.clientY+18+"px"
}function display(){
if(document.getElementById("cantion")!=null)
{
oo=true
document.body.removeChild(document.getElementById("cantion"))
}
}           
</script>
<body>
<span style="cursor: pointer" id="e" onMouseMove="create(event)" onMouseOut="display()">123123123123</span>
</body>
</HTML>

解决方案 »

  1.   

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title></title>
    </head>
    <body>
    <div id="d1" style="position:absolute; border:1px solid #F00; left:100px; top:100px; width:200px; height:20px"></div>
    <table>
    <tr>
         <td height="20px" width="50px">1</td>        
        </tr>
        <tr>
         <td height="20px" width="50px">2</td>        
        </tr>
        <tr>
         <td height="20px" width="50px">3</td>        
        </tr>
        <tr>
         <td height="20px" width="50px">4</td>        
        </tr>
    </table>
    </body>
    </html>
    <script>
    var tds = document.getElementsByTagName("td");
    for(var i=0;i<tds.length;i++){
    tds.item(i).onmousemove = function(e){
    e = e || window.event;
    var obj = document.getElementById("d1");
    obj.style.left = e.clientX+50;
    obj.style.top = e.clientY;
    };
    }
    </script>
      

  2.   

    这个才是最好的代码可以在代码中简单编程，<html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <style type="text/css">
    <!--
    .STYLE1 {color: #FFFFFF}
    #Layer1 {
    position:absolute;
    left:309px;
    top:51px;
    width:252px;
    height:191px;
    z-index:1;
    overflow: auto;
    visibility: hidden;
    }
    -->
    </style>
    </head><body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0">
    <div id="Layer1"  style="border:1px solid #99CCFF; background-color:#ffffff;">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="8%" height="24" bgcolor="#FFFFFF">&nbsp;</td>
              <td width="47%" bgcolor="#FFFFFF"><a href="#" onClick="fillin()">XXXXXXXXXXXXXXX</a></td>
              <td width="45%" bgcolor="#FFFFFF">XXXXXXXXXXXX</td>
            </tr>
            <tr>
              <td height="24" bgcolor="#FFFFFF">&nbsp;</td>
              <td bgcolor="#FFFFFF">XXXXXXXXXXXXXXX</td>
              <td bgcolor="#FFFFFF">XXXXXXXXXXX</td>
            </tr>
            <tr>
              <td height="24" bgcolor="#FFFFFF">&nbsp;</td>
              <td bgcolor="#FFFFFF">XXXXXXXXXXXXXXX</td>
              <td bgcolor="#FFFFFF">XXXXXXXXXXX</td>
            </tr>
            <tr>
              <td height="24" bgcolor="#FFFFFF">&nbsp;</td>
              <td bgcolor="#FFFFFF">XXXXXXXXXXXXXX</td>
              <td bgcolor="#FFFFFF">XXXXXXXXXX</td>
            </tr>
            <tr>
              <td height="24" bgcolor="#FFFFFF">&nbsp;</td>
              <td bgcolor="#FFFFFF">XXXXXXXXXXXXX</td>
              <td bgcolor="#FFFFFF">XXXXXXXXX</td>
            </tr>
            <tr>
              <td height="24" bgcolor="#FFFFFF">&nbsp;</td>
              <td bgcolor="#FFFFFF">XXXXXXXXXXXXX</td>
              <td bgcolor="#FFFFFF">XXXXXXXXXXXXXXXXX</td>
            </tr>
          </table>
    </div>
    <div id="list">
        
    <table width="98%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td height="30" align="left" class="title"><span class="title"><a href="#" onMouseOut="Layer1.style.visibility='hidden'" onMouseMove="Layer1.style.visibility='visible'">aaaaaaaa</a></span></td>
                <td align="left">&nbsp;</td>
              </tr>
            </table>
    </div>
    </body>
    </html>
    <script language="javascript">
    function fillin(){for(i=1;i<=8;i++)
    { var the_image_name = "document.all.n00" + i;
    var the_image_object = eval(the_image_name);
    the_image_object.value = "XXXXXXXX";
    }
    document.all.Layer1.style.visibility="hidden";}
    </script>
      

  3.   

    其实不用这么麻烦，用span的title就可以
      

  4.   

    参见：
    http://www.v-ec.com/jslib【Easy Title】部分