87,996
社区成员
发帖
与我相关
我的任务
分享如何使一个div层显示在鼠标当前位置的右下方？急！
我有一个动态生成的div,想让它自动显示在当前鼠标位置的右下方，但实际显示
的总是在新的一行的开头位置,应该怎么改？
<html>
<head>
<script language="JavaScript">
function hover(theObj)
{
getDetail();/*动态填充div*/
if(typeof(document.all.apploc)!=undefined)
{
document.all.apploc.style.display = "block"; document.all.apploc.left=event.clientXevent.offsetX+theObj.offsetWidth/2; document.all.apploc.top=event.clientYevent.offsetY+theObj.offsetHeight;
}
}
function getDetail()
{
.
. /*略掉读取数据的代码*/
.
var divnode = document.createElement("<div>");
var newtbl = document.createElement("<table border='1' width='100%' cellspacing='0' cellpadding='3'>");
len =seqs.length;
for(var i=0;i<len;i++)
{
var newTR = document.createElement("<tr>");
var newTD1 = document.createElement("<td width='20%'>");
newTD1.innerText = seqs(i).text;
newTR.appendChild(newTD1);
var newTD2 = document.createElement("<td width='20%'>");
newTD2.innerText = class(i).text;
newTR.appendChild(newTD2);
var newTD3 = document.createElement("<td width='30%'>");
newTD3.innerText = names(i).text;
newTR.appendChild(newTD3);
newtbl.appendChild(newTR);
}
divnode.appendChild(newtbl);
document.all.apploc.innerHTML=divnode.innerHTML;
}
</script>
</head>
<body>
<table width="100%" name='tbl'>
<tr class="title" align="center">
<td width="20%">Name</td>
<td width="50%" onmouseover='hover(this)'>Desc</td>
<td width="30%" onmouseover='hover(this)'>Seq</td>
</tr>
</table>
<div id="apploc" style="position:absolute ;width:'200px' ; height:'100px' ;overflow:'auto'; display:none;backgroundColor:red">
</div>
</body>
</html>
的总是在新的一行的开头位置,应该怎么改？
<html>
<head>
<script language="JavaScript">
function hover(theObj)
{
getDetail();/*动态填充div*/
if(typeof(document.all.apploc)!=undefined)
{
document.all.apploc.style.display = "block"; document.all.apploc.left=event.clientXevent.offsetX+theObj.offsetWidth/2; document.all.apploc.top=event.clientYevent.offsetY+theObj.offsetHeight;
}
}
function getDetail()
{
.
. /*略掉读取数据的代码*/
.
var divnode = document.createElement("<div>");
var newtbl = document.createElement("<table border='1' width='100%' cellspacing='0' cellpadding='3'>");
len =seqs.length;
for(var i=0;i<len;i++)
{
var newTR = document.createElement("<tr>");
var newTD1 = document.createElement("<td width='20%'>");
newTD1.innerText = seqs(i).text;
newTR.appendChild(newTD1);
var newTD2 = document.createElement("<td width='20%'>");
newTD2.innerText = class(i).text;
newTR.appendChild(newTD2);
var newTD3 = document.createElement("<td width='30%'>");
newTD3.innerText = names(i).text;
newTR.appendChild(newTD3);
newtbl.appendChild(newTR);
}
divnode.appendChild(newtbl);
document.all.apploc.innerHTML=divnode.innerHTML;
}
</script>
</head>
<body>
<table width="100%" name='tbl'>
<tr class="title" align="center">
<td width="20%">Name</td>
<td width="50%" onmouseover='hover(this)'>Desc</td>
<td width="30%" onmouseover='hover(this)'>Seq</td>
</tr>
</table>
<div id="apploc" style="position:absolute ;width:'200px' ; height:'100px' ;overflow:'auto'; display:none;backgroundColor:red">
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
fason 2003-01-07
- 打赏
- 举报
onmousemove="div1.style.top=event.clientY+15;div1.style.left=event.clientX+15;"
孟子E章 2003-01-07
- 打赏
- 举报
<body onmousemove="m.style.top=event.clientY+20;m.style.left=event.clientX+20;">
<div id=m style="position:absolute;top:0;left:0">aa</div>
<div id=m style="position:absolute;top:0;left:0">aa</div>
搞搞儿的 2003-01-07
- 打赏
- 举报
利用onmousemove事件，在其发生时令你的div的style.left=event.x；style.top=event.y
gang75 2003-01-07
- 打赏
- 举报
sj
fason 2003-01-07
- 打赏
- 举报
之前不是给出了思路，修改一下也就行了
搞搞儿的 2003-01-07
- 打赏
- 举报
赞成net_lover(孟子E章) 的
孟子E章 2003-01-07
- 打赏
- 举报
<body>
<div id=m style="position:absolute;top:0;left:0">aa</div>
<table border=1>
<tr>
<td>aa</td><td>aa</td><td>aa</td><td>aa</td>
</tr>
<tr onmouseover="m.style.visibility='visible';m.style.top=event.clientY+20;m.style.left=event.clientX+20;" onmousemove="m.style.top=event.clientY+20;m.style.left=event.clientX+20;" onmouseout="m.style.visibility='hidden'">
<td colspan=4>aa</td>
</tr>
</table>
<div id=m style="position:absolute;top:0;left:0">aa</div>
<table border=1>
<tr>
<td>aa</td><td>aa</td><td>aa</td><td>aa</td>
</tr>
<tr onmouseover="m.style.visibility='visible';m.style.top=event.clientY+20;m.style.left=event.clientX+20;" onmousemove="m.style.top=event.clientY+20;m.style.left=event.clientX+20;" onmouseout="m.style.visibility='hidden'">
<td colspan=4>aa</td>
</tr>
</table>
hevil 2003-01-07
- 打赏
- 举报
谢谢各位了，但这种效果不是我想要的，我是想只有当鼠标移到某一行上才
会出现div，且div位置应在鼠标右下方，或是在这一行上某个固定位置，两种
都行。
