位置：首页>> 网络编程>> 网页设计>> 自适应浏览器位置的div效果

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

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

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

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>[提示：你可先修改部分代码，再按运行]

投稿

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

猜你喜欢