DIV相对位置

liubingqishanlu 2008-12-19 08:23:57

一个GridView数据绑定后，鼠标放在它上面的一行，GirdView的旁边就会显示一个小框，小框显示鼠标放在GridView上当前行的信息，（小框是放在DIV里，动态显示是JAVASCRIPT实现，鼠标不放在GridView上，小框不显示），

布局是用Table，一行两列<table><tr><td><asp:Gridview></Gridview></td><td><div></div></td><tr></table>
现在一个问题是鼠标不管放在GridView里哪一行，DIV总是在定好了的那个位置显示，想请教一下，怎样能让那个DIV能够动态的随着鼠标放在Gridview里的哪一行，在那一行的旁边显示。

...全文

1012 13 打赏收藏转发到动态举报

写回复

用AI写文章

13 条回复

切换为时间正序

请发表友善的回复…

发表回复

chenyunkun2008 2009-05-12

打赏
举报

对的，ff中有问题，只能在ie里可行，

ihavenothing9 2009-01-20

打赏
举报

四楼的，在firefox中显示好像就有问题了哦

liubingqishanlu 2008-12-20

打赏
举报

我想实现的就是在Girdview上，onmouseover时，DIV能够跟随鼠标的移动而始终在GridView右边上下移动（不进GridView里）

liubingqishanlu 2008-12-20

打赏
举报

4楼说的很清楚啦。。把参数调下就是你要的了。。

不是我要的~~~~我的要求是说的不够明白吗？

liubingqishanlu 2008-12-20

打赏
举报

[Quote=引用 8 楼 qq175691524 的回复:]
引用 6 楼 liubingqishanlu 的回复:
我用的这种方法
function doit(){
var obj = document.getElementById("divDesc");
obj.style.left = event.x+10;
obj.style.top = event.y+10;
}
window.onload=function(){
document.body.onmousemove = doit; }
<div id="divDesc"> </div>
这种方法能够使DIV跟随鼠标移动，但是效果却不是想要的那种，想实现的效果GridView在左边，鼠标在GrivVi…
[/Quote]

不是~~~

qq175691524 2008-12-20

打赏
举报

[Quote=引用 6 楼 liubingqishanlu 的回复:]
我用的这种方法
function doit(){
var obj = document.getElementById("divDesc");
obj.style.left = event.x+10;
obj.style.top = event.y+10;
}
window.onload=function(){
document.body.onmousemove = doit; }
<div id="divDesc"> </div>
这种方法能够使DIV跟随鼠标移动，但是效果却不是想要的那种，想实现的效果GridView在左边，鼠标在GrivView上移动，DIV始终在GridView的右边跟…
[/Quote]
4楼说的很清楚啦。。把参数调下就是你要的了。。

qq175691524 2008-12-20

打赏
举报

mark~~~

liubingqishanlu 2008-12-20

打赏
举报

我用的这种方法
function doit(){
var obj = document.getElementById("divDesc");
obj.style.left = event.x+10;
obj.style.top = event.y+10;
}
window.onload=function(){
document.body.onmousemove = doit; }
<div id="divDesc"> </div>
这种方法能够使DIV跟随鼠标移动，但是效果却不是想要的那种，想实现的效果GridView在左边，鼠标在GrivView上移动，DIV始终在GridView的右边跟随鼠标上下移动，继续求助中~~

liubingqishanlu 2008-12-20

打赏
举报

我用的这种方法
function doit(){
var obj = document.getElementById("divDesc");
obj.style.left = event.x+10;
obj.style.top = event.y+10;
}
window.onload=function(){
document.body.onmousemove = doit; }
<div id="divDesc"></div>
这种方法能够使DIV跟随鼠标移动，但是效果却不是想要的那种，想实现的效果GridView在左边，鼠标在GrivView上移动，DIV始终在GridView的右边跟随鼠标上下移动，继续求助中~~

jiang_jiajia10 2008-12-20

打赏
举报



<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>



<!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>



    <script language="javascript" type="text/javascript"> 



function followcursor(){

var DIV = document.getElementById('div01');

DIV.style.display = "block";

DIV.style.left=document.body.scrollLeft+event.clientX+10

DIV.style.top=document.body.scrollTop+event.clientY+10

}

    </script>



</head>

<body>

    <form id="form1" runat="server">

        <div style="width: 300px; height: 300px; border: solid 1px #ccc; display: none;position:absolute;"

            id="div01">

            跟随鼠标显示的DIV<a href="javascript:void(0)" onclick="document.getElementById('div01').style.display='none';">关闭</a>

        </div>

        <div>

            <a href="javascript:void(0)" onclick="followcursor();">点一</a></div>

        <div style="position: absolute; top: 300px; left: 400px;">

            <a href="javascript:void(0)" onclick="followcursor();">点二</a></div>

    </form>

</body>

</html>