div 浮动层怎么定位到点击的按钮附近

fumeiyu2 2009-02-09 03:09:59

...全文

3855 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

cloudgamer 2009-02-10

打赏
举报

通过
while (o.offsetParent) { o = o.offsetParent; iLeft += o.offsetLeft; iTop += o.offsetTop; }
获取按钮位置
参考这里

yoursWTR 2009-02-09

打赏
举报



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

    <title>无标题页</title>

    <style type="text/css">

        div{position: fixed;width: 60px;height: 20px;border: 1px #000 solid;background-color:#fff}

    </style>

    <script type="text/javascript">

    function move()

    {

        document.getElementById('d').style.display = 'block';

        document.getElementById('d').style.left= event.clientX+5;

        document.getElementById('d').style.top = event.clientY-40;

    }    

    function out()

    {

        document.getElementById('d').style.display = 'none';

    }    

    function Creatediv()

    {

        var d = document.createElement("div"); 

        d.id = "d";

        d.style.display  = 'none'; 

        d.innerHTML="动态DIV" 

        document.body.appendChild(d); 

    }

    </script>

</head>

<body onload="Creatediv()">

    <p>文字文字文字文字文字文字文字</p>

    <p>文字文字文字文字文字文字文字</p>

    <p>文字文字文字文字文字文字文字</p>

    <p>文字文字文字文字文字文字文字</p>

    <p><a href="" onmousemove="move()" onmouseout="out()">按钮按钮按钮按钮按钮按钮按钮</a></p>

    <p>文字文字文字文字文字文字文字</p>

    <p>文字文字文字文字文字文字文字</p>

    <p>文字文字文字文字文字文字文字</p>

    <p>文字文字文字文字文字文字文字</p>

    <p>文字文字文字文字文字文字文字</p>

    <p><a href="" onmousemove="move()" onmouseout="out()">按钮按钮按钮按钮按钮按钮按钮</a></p>

    <p>文字文字文字文字文字文字文字</p>

    <p>文字文字文字文字文字文字文字</p>

    <p>文字文字文字文字文字文字文字</p>

    <p>文字文字文字文字文字文字文字</p>

    <p><a href="" onmousemove="move()" onmouseout="out()">按钮按钮按钮按钮按钮按钮按钮</a></p>

</body>

</html>

IMF7 2009-02-09

打赏
举报

给DIV一个绝对定位的属性，然后left top就可以了

cngothic 2009-02-09

打赏
举报



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

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<script type="text/javascript">

  function showText(id){

    if (document.getElementById(id).style.display == "none"){

      document.getElementById(id).style.display="";

      document.getElementById(id).style.position="relative";

      document.getElementById(id).style.color="red";

      document.getElementById(id).style.left="40px";

      document.getElementById(id).style.top="-20px";

      document.getElementById("showButton").value="隐藏";

	  

	}

	else{

      document.getElementById(id).style.display="none";

      document.getElementById("showButton").value="显示";

	}

  }

</script>

<style type="text/css">

  #showContent {width:300px; height:auto; border:#ccc 1px solid; padding:10px;}

</style>

</head>



<body>

  <div id="showContent">

    <input id="showButton" value="显示" type="button" onclick="showText('showContentText');" />

	<div id="showContentText" style="display:none;">信息内容</div>

  </div>

</body>

</html>

cngothic 2009-02-09

打赏
举报



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

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<script type="text/javascript">

  function showText(id){

    if (document.getElementById(id).style.display == "none"){

      document.getElementById(id).style.display="";

      document.getElementById("showButton").value="隐藏";

	  

	}

	else{

      document.getElementById(id).style.display="none";

      document.getElementById("showButton").value="显示";

	}

  }

</script>

<style type="text/css">

  #showContent {width:300px; height:auto; border:#ccc 1px solid; padding:10px;}

</style>

</head>



<body>

  <div id="showContent">

    <input id="showButton" value="显示" type="button" onclick="showText('showContentText');" />

	<div id="showContentText" style="display:none;">信息内容</div>

  </div>

</body>

</html>

happy002 2009-02-09

打赏
举报

给你个简单例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  

 </HEAD>



 <BODY>

  <input type="button" onclick="a()" value="..."/>

  <div id="b">abcd</div>

  <script>

  function a(){

 //   var x = event.clientX;

//	var y = event.clientY;

	document.getElementById("b").innerHTML = "<div style='z-index: 100; position:relative;background-color:red;left:-10;top:-10;width:30;height:60'>bbbbbbbbb</div>"

  }

  </script>

 </BODY>

</HTML>