DHTML 中的绝对定位

下面的东西显示了在复杂的情况下,
怎样最好地在一个Element的旁边显示某个DIV。
当然,你可以滚动窗口,使这个按纽靠窗口的 左/上/右/下 的情况,观察菜单的弹出方位。
全部代码:


代码如下:

<table border=1 cellpadding=8 cellspacing=0> 
<tr><td>table1</td><td>table1</td></tr> 
<tr><td>table1</td><td> 
 <div id=div1 style='position:absolute;background-color:wheat;padding:4px;'> 
 div1 start 
 <div id=div1button style='border:outset 2px;background-color:threedface;color:red;font-weight:bold;cursor:hand;padding:4px;'> 
  ClickMe 
 </div> 
 div1 end 
 </div> 
 </td></tr> 
</table> 
<div style='height:100px'>-</div> 
<table border=1 cellpadding=8 cellspacing=0> 
<tr><td>table2</td><td>table2</td></tr> 
<tr><td>table2</td><td> 
 <div id=div2 style='position:relative;left:24px;background-color:wheat;'> 
 div2 start 
 <div id=div2menu style='display:none;position:absolute;background-color:lightgrey;height:200px;width:120px;border:outset 1px;padding:4px'> 
  div2menu<br> 
  div2menu<br> 
  div2menu<br> 
  div2menu<br> 
  div2menu<br> 
 </div> 
 div2 end 
 </div> 
 </td></tr> 
</table> 
<script language='jscript'> 
//get the position of a element ( by the scroll offset ) 
function LostinetWebGetScrollPostion(e) 

 var b=e.document.body; 
 if(e==b)return {left:0,top:0}; 
 with(e.getBoundingClientRect()) 
 { 
  return {left:b.scrollLeft+left,top:b.scrollTop+top}; 
 } 

//get the position of a element ( by the client offset ) 
function LostinetWebGetClientPosition(e) 

 var b=e.document.body; 
 if(e==b)return {left:-b.scrollLeft,top:-b.scrollTop}; 
 with(e.getBoundingClientRect()) 
 { 
  return {left:left-b.clientLeft,top:top-b.clientTop}; 
 } 

//get absolute or relative parent 
function LostinetWebGetStandParent(e) 

 for(var p=e.parentElement;p!=null;p=p.parentElement) 
 { 
  var sp=p.currentStyle.position; 
  if(sp=='absolute'||sp=='relative') 
   return p; 
 } 
 return e.document.body; 

//calc the position of floate that relative to e 
function LostinetWebCalcPosition(floate,e) 

 var epos=LostinetWebGetScrollPostion(e); 
 var spos=LostinetWebGetScrollPostion(LostinetWebGetStandParent(floate)); 
 var s=LostinetWebGetStandParent(floate); 
 return {left:epos.left-spos.left-s.clientLeft,top:epos.top-spos.top-s.clientTop}; 

//get the best position to put the floate 
function LostinetWebAdjustMirror(floate,e,pos) 

 //c:Client,f:floate,e:e,p:floate's StandParent,m:Mirror 
 var cw=e.document.body.clientWidth; 
 var ch=e.document.body.clientHeight; 
 var fw=floate.offsetWidth; 
 var fh=floate.offsetHeight; 
 var ew=e.offsetWidth; 
 var eh=e.offsetHeight; 
 var ecpos=LostinetWebGetClientPosition(e); 
 var empos={left:ecpos.left+ew/2,top:ecpos.top+eh/2}; 
 var pcpos=LostinetWebGetClientPosition(LostinetWebGetStandParent(floate)); 
 var fcpos=LostinetWebGetClientPosition(floate); 
 var fmpos={left:pcpos.left+pos.left+fw/2,top:pcpos.top+pos.top+fh/2}; 
 //left<-->right 
 if( (fmpos.left<empos.left) ? ((fmpos.left-fw/2<0)&&((empos.left*2-fmpos.left)+fw/2<=cw)) : ((fmpos.left+fw/2>cw)&&((empos.left*2-fmpos.left)-fw/2>=0)) ) 
  fmpos.left=empos.left*2-fmpos.left; 
 //top<-->bottom 
 if( (fmpos.top<empos.top) ? ((fmpos.top-fh/2<0)&&((empos.top*2-fmpos.top)+fh/2<=ch)) : ((fmpos.top+fh/2>ch)&&((empos.top*2-fmpos.top)-fh/2>=0)) ) 
  fmpos.top=empos.top*2-fmpos.top; 
 pos.left=fmpos.left-pcpos.left-fw/2; 
 pos.top=fmpos.top-pcpos.top-fh/2; 

document.attachEvent('onclick',function f() 

 if(div1button.contains(event.srcElement))return; 
 if(div2menu.contains(event.srcElement))return; 
 div2menu.runtimeStyle.display='none'; 
}); 
function div1button.onclick() 

 div2menu.runtimeStyle.display='block'; 
 var pos=LostinetWebCalcPosition(div2menu,div1button); 
 pos.top+=div1button.offsetHeight; 
 LostinetWebAdjustMirror(div2menu,div1button,pos); 
 div2menu.runtimeStyle.left=pos.left; 
 div2menu.runtimeStyle.top=pos.top; 

</script>

(0)

相关推荐

  • DHTML 中的绝对定位

    下面的东西显示了在复杂的情况下, 怎样最好地在一个Element的旁边显示某个DIV. 当然,你可以滚动窗口,使这个按纽靠窗口的 左/上/右/下 的情况,观察菜单的弹出方位. 全部代码: 复制代码 代码如下: <table border=1 cellpadding=8 cellspacing=0>  <tr><td>table1</td><td>table1</td></tr>  <tr><td>t

  • ASP中实现分页显示的七种方法

    在微软的ASP编程体系中,ADO对象的建立,使得从网页访问数据库成为一件易事,特别是ADO的Recordset对象使得控制数据的输出显示更为方便.自由.而在Visual InterDev6.0(以下简称VI6.0)中,由于Script Object Model(以下简称SOM).Design-Time Control(以下简称DTC)以及Data Environment Object Model(以下简称DEOM)等对象模型的引入,使网页对数据库的访问设计显得更为方便. 因为主题方面的原因,关于

  • JS类库Bindows1.3中的内存释放方式分析

    我在前段时间介绍过IE中JavaScript脚本Memory Leak的问题,后来在几位热心网友的讨论下,基本认可了内存泄露的事实和原理.在小规模的测试case下,本来都达到了基本避免IE中脚本的ML问题.可是近来发现只以"仔细"来防止IE中脚本ML似乎是非常困难的一件事情,难道开始的讨论有错误吗? 何谓"仔细"呢?就是说在有对象相互引用的时候,在对象丢弃时(不一定是页面refresh)断开彼此的引用链,特别是脚本中创建的对象和DHTML中的对象间的引用:清除HTM

  • HTML Component(HTC) 小应用

    在微软IE 5.0版本的浏览器发布以前,网页编程中面对的最大挑战就是不能轻易地创建组件,以达到代码重用和多页面共享的目的.这个问题一直困扰着DHTML(动态 HEML)的网页编程者.他们只能不断地重复书写HTML.CSS和javascript的代码,以满足多个页面上的重复或相似的功能.自IE 5.0浏览器发布后,这种情况得到了改善,它带给我们一个新的指令组合方法,可把实现特定功能的代码封装在一个组件内,从而实现多页面的代码重用,使网页编程进入一个全新的天地.这个新的技术就是我们要谈到的DHTML

  • 轻松学习XML教程

    传统上,我们浏览网页,如果加入最新的数据.只能是等我们重新向服务器端请求时才能显示出来. 但是,对于一些时效性很强的网站.传统的这种做法是不能满足的. XML越来越热,关于XML的基础教程网络上也随处可见.可是一大堆的概念和术语往往让人望而生畏,很多朋友问我:XML到底有什么用,我们是否需要学习它?我想就我个人学习过程的心得和经验,写一篇比较全面的介绍文章.首先有两点是需要肯定的: 第一:XML肯定是未来的发展趋势,不论是网页设计师还是网络程序员,都应该及时学习和了解,等待只会让你失去机会: 第

  • XML轻松学习手册(2)XML概念

    第二章 XML概念 导言 经过第一章的快速入门学习,你已经知道了XML是一种能够让你自己创造标识的语言,它可以将数据与格式从网页中分开,它可以储存数据和共享数据的特性使得XML无所不能.如果你希望深入学习XML,系统掌握XML的来龙去脉,那么我们首先还是要回到XML概念的问题上来.XML(Extensible Markup Language),一种扩展性标识语言."扩展性"标识"语言".每一个词都明确的点明了XML的重要特点和功能.我们来仔细分析: 一. 扩展性 二

  • HTC教程

    在微软IE 5.0版本的浏览器发布以前,网页编程中面对的最大挑战就是不能轻易地创建组件,以达到代码重用和多页面共享的目的.这个问题一直困扰着DHTML(动态 HEML)的网页编程者.他们只能不断地重复书写HTML.CSS和javascript的代码,以满足多个页面上的重复或相似的功能.自IE 5.0浏览器发布后,这种情况得到了改善,它带给我们一个新的指令组合方法,可把实现特定功能的代码封装在一个组件内,从而实现多页面的代码重用,使网页编程进入一个全新的天地.这个新的技术就是我们要谈到的DHTML

  • 微信小程序开发之IOS和Android兼容的问题

    微信小程序开发之IOS和Android兼容的问题 一.时间转换问题: 这不只是小程序上面的问题是ios系统 都有这个问题 就是new  Date("2017-06-16") 在IOS会出现NAN的情况所以对于时间转换需要另行封装,解决方案如下 1.替换"-"为"/" 2.删除"."后面的字符串(带毫秒也会有问题) 代码如下: /** * 字符串转换为时间 * @param {String} src 字符串 */ strToDa

  • 基于JavaScript实现无缝滚动效果

    本文实例为大家分享了JavaScript实现无缝滚动效果展示的具体代码,供大家参考,具体内容如下 首先应该区分样式中的绝对定位和相对定位,一般来说,移动的单位为绝对定位,在这个实例中,移动的Ul就是绝对定位 ,否则它根本无法滚动,而它相对于div1滚动 ,则div1就作为他的相对定位. oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;这段代码是实现无缝滚动的核心,使之可以在不论左右滚动的时候都有下一步图片接上去. 在操作或者进行比较的时候,都要用offset取

  • JavaScript 节点操作 以及DOMDocument属性和方法

    属性: 1Attributes 存储节点的属性列表(只读) 2childNodes 存储节点的子节点列表(只读) 3dataType 返回此节点的数据类型 4Definition 以DTD或XML模式给出的节点的定义(只读) 5Doctype 指定文档类型节点(只读) 6documentElement 返回文档的根元素(可读写) 7firstChild 返回当前节点的第一个子节点(只读) 8Implementation 返回XMLDOMImplementation对象 9lastChild 返回

随机推荐