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 相关文章推荐
特殊字符、常规符号及其代码对照表
Jun 26 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
Sep 01 Javascript
javascript模拟评分控件实现方法
May 13 Javascript
angular ng-click防止重复提交实例
Jun 16 Javascript
vue+swiper实现组件化开发的实例代码
Oct 26 Javascript
使用vuex的state状态对象的5种方式
Apr 19 Javascript
原生JS实现手动轮播图效果实例代码
Nov 22 Javascript
Vue使用axios出现options请求方法
May 30 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
Jul 04 Javascript
vue中组件通信的八种方式(值得收藏!)
Aug 09 Javascript
layui实现二维码弹窗、并下载到本地的方法
Sep 25 Javascript
在elementui中Notification组件添加点击事件实例
Nov 11 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
微信开发之获取JSAPI TICKET
2017/07/07 PHP
ThinkPHP框架整合微信支付之刷卡模式图文详解
2019/04/10 PHP
JavaScript实际应用:innerHTMl和确认提示的使用
2006/06/22 Javascript
javascript中最常用的继承模式 组合继承
2010/08/12 Javascript
Jquery 表格合并的问题分享
2011/09/17 Javascript
Notify - 基于jquery的消息通知插件
2011/10/18 Javascript
javascript学习笔记(十八) 获得页面中的元素代码
2012/06/20 Javascript
innerText 使用示例
2014/01/23 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
JS中mouseover和mouseout多次触发问题如何解决
2016/06/06 Javascript
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
node.js文件上传重命名以及移动位置的示例代码
2018/01/19 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
Javascript节流函数throttle和防抖函数debounce
2020/12/03 Javascript
Vue实现小购物车功能
2020/12/21 Vue.js
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
[40:16]TFT vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python绘图库Matplotlib的安装
2014/07/03 Python
Python实现的二维码生成小软件
2014/07/11 Python
浅谈Python实现2种文件复制的方法
2018/01/19 Python
python判断列表的连续数字范围并分块的方法
2018/11/16 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
Python 正则表达式爬虫使用案例解析
2019/09/23 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
如何通过python实现人脸识别验证
2020/01/17 Python
python opencv pytesseract 验证码识别的实现
2020/08/28 Python
带你认识HTML5中的WebSocket
2015/05/22 HTML / CSS
英国领先的NHS批准的在线药店:Pharmacy2U
2017/01/06 全球购物
英国领先的维生素和营养补充剂直接供应商:Healthspan
2019/04/22 全球购物
国际花店:Pickup Flowers
2020/04/10 全球购物
分解成质因数(如435234=251*17*17*3*2,据说是华为笔试题)
2014/07/16 面试题
大学本科毕业生求职信范文
2013/12/18 职场文书
活动志愿者自荐信
2014/01/27 职场文书
2014法制宣传日活动总结范文
2014/11/01 职场文书
春风化雨观后感
2015/06/11 职场文书
与Windows10相比Windows11有哪些改进?值不值得升级?
2021/11/21 数码科技