DHTML 中的绝对定位


Posted in Javascript onNovember 26, 2006

下面的东西显示了在复杂的情况下,
怎样最好地在一个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> 
Javascript 相关文章推荐
jquery多浏览器捕捉回车事件代码
Jun 22 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
Mar 03 Javascript
jquery删除ID为sNews的tr元素的内容
Apr 10 Javascript
一个检测表单数据的JavaScript实例
Oct 31 Javascript
JavaScript中的return语句简单介绍
Dec 07 Javascript
Vue.js实现网格列表布局转换方法
Aug 25 Javascript
深入理解Vue.js源码之事件机制
Sep 27 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
Nov 05 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
Oct 14 Javascript
解决在Vue中使用axios用form表单出现的问题
Oct 30 Javascript
详解node和ES6的模块导出与导入
Feb 19 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
Mar 03 Javascript
js验证表单第二部分
Nov 25 #Javascript
js验证表单大全
Nov 25 #Javascript
禁止刷新,回退的JS
Nov 25 #Javascript
用函数式编程技术编写优美的 JavaScript
Nov 25 #Javascript
通过JAVASCRIPT读取ASP设定的COOKIE
Nov 24 #Javascript
键盘控制事件应用教程大全
Nov 24 #Javascript
Javascript操纵Cookie实现购物车程序
Nov 23 #Javascript
You might like
使用phpQuery采集网页的方法
2013/11/13 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
php版微信数据统计接口用法示例
2016/10/12 PHP
utf8的编码算法 转载
2006/12/27 Javascript
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
chrome原生方法之数组
2011/11/30 Javascript
Javascript 面向对象(三)接口代码
2012/05/23 Javascript
js修改地址栏URL参数解决url参数问题
2012/12/15 Javascript
浅谈JavaScript中小数和大整数的精度丢失
2016/05/31 Javascript
AngularJS实现表单验证功能
2017/01/09 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
Javascript网页抢红包外挂实现分享
2018/01/11 Javascript
Webpack中雪碧图插件使用详解
2018/05/25 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
2019/05/10 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
2020/06/02 Javascript
Vue结合路由配置递归实现菜单栏功能
2020/06/16 Javascript
js+css3实现炫酷时钟
2020/08/18 Javascript
JS中队列和双端队列实现及应用详解
2020/09/29 Javascript
[01:02:53]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第二局
2016/03/06 DOTA
转换科学计数法的数值字符串为decimal类型的方法
2018/07/16 Python
python mysql中in参数化说明
2020/06/05 Python
利用css3径向渐变做一张优惠券的示例
2018/03/22 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
2020/01/14 HTML / CSS
中科前程Java笔试题
2016/11/20 面试题
党的群众路线对照检查材料(个人)
2014/09/24 职场文书
2014年售后服务工作总结
2014/11/18 职场文书
2014年学校体育工作总结
2014/12/08 职场文书
2015年工会工作总结范文
2015/07/23 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
责任书格式
2019/04/18 职场文书
MySQL安装后默认自带数据库的作用详解
2021/04/27 MySQL
Python time库的时间时钟处理
2021/05/02 Python
Python中threading库实现线程锁与释放锁
2021/05/17 Python
中国古风插画师排行榜:夏达第一,第三是阴阳师姑获鸟皮肤创作者
2022/03/18 国漫
详解Alibaba Java诊断工具Arthas查看Dubbo动态代理类
2022/04/08 Java/Android
CSS使用Flex和Grid布局实现3D骰子
2022/08/05 HTML / CSS