下拉菜单如何定位DIV

最新推荐文章于 2024-09-04 15:48:29 发布

ackwie8024934

最新推荐文章于 2024-09-04 15:48:29 发布

阅读量979

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/yuji/archive/2009/05/05/1449274.html

版权

obj指一个html控件
obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。
obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。
obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。
obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。
event指事件源,这里指鼠标
event.clientX:相对于客户区域的x坐标位置，不包括滚动条，就是正文区域。
event.offsetX：设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。
scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。 scrollWidth 获取对象的滚动宽度。
scrollHeight 获取对象的滚动高度。
scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。

例子比较粗糙，用着改改就ok了．

Code
<!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>
<style type="text/css">

</style>
<script>
function dis_sub(eP){
  document.getElementById('subMenu').style.display="";
  document.getElementById('subMenu').style.zIndex=99;
  var s,cur_d
  var eT = eP.offsetTop;
  var eH = eP.offsetHeight+eT;
  var dH = document.getElementById('subMenu').style.pixelHeight;
  var sT = document.body.scrollTop;
  var sL = document.body.scrollLeft;
  event.cancelBubble=true;
  document.getElementById('subMenu').style.posLeft = event.clientX-event.offsetX+sL-5;
  document.getElementById('subMenu').style.posTop = event.clientY-event.offsetY+eH+sT-5;
}
function hid_sub(eP){
  eP.style.display="none";
}
</script>
</head>

<body>
<div id = "subMenu" class="menu_sub" style="display:none;" onMouseOut="hid_sub(this)">子菜单一</div>
<div class="my_header">
<div class="logo">logo</div>
<div class="title">
<div class="menu"><span onMouseOver="dis_sub(this)" style="background-color:blue">菜单一</span> 菜单二菜单三菜单四菜单五 </div>
<div class="title_des">网站描述</div>
</div>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/yuji/archive/2009/05/05/1449274.html