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 相关文章推荐
原生js结合html5制作小飞龙的简易跳球
Mar 30 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
Dec 31 Javascript
jQuery判断浏览器并动态调整select宽度的方法
Mar 02 Javascript
Vue.js动态添加、删除选题的实例代码
Sep 30 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
Oct 28 Javascript
微信小程序 Button 组件详解及简单实例
Jan 10 Javascript
js实现自动图片轮播代码
Mar 22 Javascript
JavaScript分步实现一个出生日期的正则表达式
Mar 22 Javascript
Vue3.0 响应式系统源码逐行分析讲解
Oct 14 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
Mar 13 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
Jun 08 Javascript
vue print.js打印支持Echarts图表操作
Nov 13 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
fleaphp rolesNameField bug解决方法
2011/04/23 PHP
解析php addslashes()与addclashes()函数的区别和比较
2013/06/24 PHP
10 个经典PHP函数
2013/10/17 PHP
php学习笔记之mb_strstr的基本使用
2018/02/03 PHP
php获取目录下所有文件及目录(多种方法)(推荐)
2019/05/14 PHP
如何实现浏览器上的右键菜单
2006/07/10 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
2010/11/19 Javascript
javascript字符串循环匹配实例分析
2015/07/17 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
2015/09/10 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
封装获取dom元素的简单实例
2016/07/08 Javascript
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
jQuery实现ajax的嵌套请求案例分析
2019/02/16 jQuery
微信小程序websocket实现即时聊天功能
2019/05/21 Javascript
详解uniapp的全局变量实现方式
2021/01/11 Javascript
python查找第k小元素代码分享
2013/12/18 Python
Python功能键的读取方法
2015/05/28 Python
Python 包含汉字的文件读写之每行末尾加上特定字符
2016/12/12 Python
Python切片索引用法示例
2018/05/15 Python
numpy.linspace函数具体使用详解
2019/05/27 Python
django多文件上传,form提交,多对多外键保存的实例
2019/08/06 Python
解决Python数据可视化中文部分显示方块问题
2020/05/16 Python
python如何查看安装了的模块
2020/06/23 Python
css3使用animation属性实现炫酷效果(推荐)
2020/02/04 HTML / CSS
泰海淘:泰国king Power王权免税集团旗下跨境海淘综合型电商
2020/07/26 全球购物
生物化学研究助理员求职信
2013/10/09 职场文书
工地安全检查制度
2014/02/04 职场文书
学校四群教育实施方案
2014/06/12 职场文书
中学生教师节演讲稿
2014/09/03 职场文书
民事赔偿协议书
2014/11/02 职场文书
python爬虫selenium模块详解
2021/03/30 Python
MySQL sql_mode的使用详解
2021/05/08 MySQL
SpringBoot SpringEL表达式的使用
2021/07/25 Java/Android
Python用tkinter实现自定义记事本的方法详解
2022/03/31 Python
TS 类型兼容教程示例详解
2022/09/23 Javascript