自适应浏览器位置的div效果

来源：经典论坛时间：2008-05-29 13:15:00　

iou33449999 文：

一个链接一个层一个onMouseOver 一个onMouseOut

然后这个层就会在onMouseOver这个链接时出来、在onMouseOut时又消失掉，这个的确不难做，难的是当这个连接在浏览器的不同位置时，这个层的位置怎么可以自适应呢？

比如又左上角、右上角、左下角、右下角、垂直居中偏左、垂直居中偏右…………等等等位置，如果这个层出现的位置固定了就会导致有些地方看不见了，是吧，因此想问“自适应浏览器位置的div效果”怎么实现呢？

如图示，如果层出现在一个固定的位置，比如连接的右上，势必导致有些内容会看不见，因此图示的是其该层自适应连接在浏览器所在的位置而出现的效果，这些可能需要取得连接的位置坐标（x、y），然后再定义层的位置。

caiying2007 答：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>自适应浏览器位置的div效果</title></head><body><div style="FLOAT: left"><a href="###" titles="显示层（左上）">点击</a></div><div style="FLOAT: right"><a href="###" titles="显示层（右上）">点击</a></div><div style="height:540px;width:100％"></div><div style="FLOAT: left"><a href="###" titles="显示层（左下）">点击</a></div><div style="FLOAT: right"><a href="###" titles="显示层（右下）">点击</a></div><script type="text/javascript">var obj=document.getElementsByTagName("a"),j=obj.length;for (var i=0;i<j;i++){if (obj[i].titles) obj[i].onclick=function(){showme(this)}}function showme(o){var w=150;var h=100;var x=o.parentElement.offsetLeft;var y=o.parentElement.offsetTop;//alert(x+"\n"+y+"\n")if (x>(document.body.offsetWidth-w-40)) {x=document.body.offsetWidth-w-40}; else x+=50;if (y<(h+30)) {y=y+30}; else y=y-h+10;var newobj=document.createElement("div");newobj.style.display = "block";newobj.style.border = "2px red solid";newobj.style.position = "absolute";newobj.style.left=x+"px";newobj.style.top=y+"px";newobj.style.width=w+"px";newobj.style.height=h+"px";newobj.innerHTML=o.titles;document.body.appendChild(newobj)}</script></body></html>[提示：你可先修改部分代码，再按运行]

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>更多位置 - asp之家</title> <style type="text/css">body{margin:0;padding:0} table{border-collapse:collapse;width:100％;height:100％; } td{ border:1px solid #000; } </style></head><body><table><tr><td width="269"><a onclick=showme(this) href="#">点击</a></td><td><a onclick=showme(this) href="#">点击</a></td><td align="right"><a onclick=showme(this) href="#">点击</a></td></tr><tr><td width="269"><a onclick=showme(this) href="#">点击</a></td><td><a onclick=showme(this) href="#">点击</a></td><td align="right"><a onclick=showme(this) href="#">点击</a></td></tr><tr><td width="269"><a onclick=showme(this) href="#">点击</a></td><td align="right"><a onclick=showme(this) href="#">点击</a></td><td align="center"><a onclick=showme(this) href="#">点击</a></td></tr><tr><td width="269"><a onclick=showme(this) href="#">点击</a></td><td><p align="center"><a onclick=showme(this) href="#"><b>p点击</b></a></td><td align="right"><p align="left"><a onclick=showme(this) href="#"><b>p点击</b></a></td></tr><tr><td width="269"><a onclick=showme(this) href="#">点击</a></td><td><a onclick=showme(this) href="#">点击</a></td><td align="right"><a onclick=showme(this) href="#">点击</a></td></tr><tr><td width="269"><a onclick=showme(this) href="#">点击</a></td><td><a onclick=showme(this) href="#">点击</a></td><td align="right"><a onclick=showme(this) href="#">点击</a></td></tr></table><script type="text/javascript">function showme(o){var w=150;var h=100;var x=o.parentElement.offsetLeft;var y=o.parentElement.offsetTop;//var x=o.offsetLeft;//var y=o.offsetTop;alert(x+"\n"+y+"\n")if (x>(document.body.offsetWidth-w-40)) {x=document.body.offsetWidth-w-40}; else x+=50;if (y<(h+30)) {y=y+30}; else y=y-h+10;var newobj=document.createElement("div");newobj.style.display = "block";newobj.style.border = "2px red solid";newobj.style.position = "absolute";newobj.style.left=x+"px";newobj.style.top=y+"px";newobj.style.width=w+"px";newobj.style.height=h+"px";document.body.appendChild(newobj)}</script></body></html>[提示：你可先修改部分代码，再按运行]

标签：自适应,onMouseOver,浏览器,div

投稿

自适应浏览器位置的div效果

猜你喜欢

aspjpeg 半透明描边的实现函数

Dreamweaver如何制作会移动的广告条

垂直对齐：vertical-align属性

在JScript中使用RecordSet对象的GetRows方法

SQL 语句中的通配符

网页标准化-CSS命名规划整理

javascript面向对象技术基础(四)

AJAX的jQuery实现入门(二)

WEB2.0网页制作标准教程（12）XHTML校验及常见错误

纯CSS实现动态提示信息Tooltips

CSS网页布局编码小技巧整理

asp+XMLHTTP的国际域名查询系统（whois）源代码

如何在Win下mysql备份恢复命令

如何定义记录集打开的游标类型？

一个简单的ASP计数器代码

如何使用ADO.NET连接数据库？

js滑动展开与折叠效果（收缩）

此数据库没有有效所有者，因此无法安装数据库关系图支持对象

巧用Dreamweaver MX设计导航栏特效

使用XML技术上传文件的例子