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 相关文章推荐
javascript prototype原型操作笔记
Dec 07 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
Mar 28 Javascript
jQuery(非HTML5)可编辑表格实现代码
Dec 11 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
Nov 30 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
Jan 26 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
Mar 30 Javascript
很棒的Bootstrap选项卡切换效果
Jul 01 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
Sep 26 Javascript
ES6中字符串string常用的新增方法小结
Nov 07 Javascript
JS实现百度搜索接口及链接功能实例代码
Feb 02 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
Mar 07 Javascript
EXTJS7实现点击拖拉选择文本
Dec 17 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
php_screw 1.5:php加密: 安装与使用详解
2013/06/20 PHP
php统计文章排行示例
2014/03/04 PHP
PHP读取zip文件的方法示例
2016/11/17 PHP
Thinkphp5+uploadify实现的文件上传功能示例
2018/05/26 PHP
JavaScript类型转换方法及需要注意的问题小结(挺全面)
2010/11/11 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
2010/12/11 Javascript
JQuery扩展插件Validate 5添加自定义验证方法
2011/09/05 Javascript
js中style.display=&quot;&quot;无效的解决方法
2014/10/30 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
jQuery选择器基础入门教程
2016/05/10 Javascript
jQuery使用deferreds串行多个ajax请求
2016/08/22 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
2016/10/09 Javascript
浅谈JavaScript的函数及作用域
2016/12/30 Javascript
gulp解决跨域的配置文件问题
2017/06/08 Javascript
详解Vuex管理登录状态
2017/11/13 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
2018/05/01 Javascript
vue.js实现插入数值与表达式的方法分析
2018/07/06 Javascript
使用Angular-CLI构建NPM包的方法
2018/09/07 Javascript
JS实现滑动拼图验证功能完整示例
2020/03/29 Javascript
Python Pandas找到缺失值的位置方法
2018/04/12 Python
python实践项目之监控当前联网状态详情
2019/05/23 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
Python 实现将大图切片成小图,将小图组合成大图的例子
2020/03/14 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
python新手学习可变和不可变对象
2020/06/11 Python
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
幼儿园英语教学反思
2014/01/30 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
教师师德师风自我剖析材料
2014/09/29 职场文书
大学生求职意向书
2015/05/11 职场文书
2015年高中生国庆节演讲稿
2015/07/30 职场文书
Python爬虫入门案例之爬取二手房源数据
2021/10/16 Python
Python常遇到的错误和异常
2021/11/02 Python
Python进程间的通信之语法学习
2022/04/11 Python