实用性较高的JavaScript弹出层offset定位

现在的位置: 首页＞JavaScript＞正文

上篇

实用性较高的JavaScript弹出层offset定位

2010年09月02日 ⁄ JavaScript ⁄ 暂无评论 ⁄ 被围观 1,852+

昨天的一片运费设置弹出层的文章里面提到了一个鼠标移到地区位置弹出层，所弹出层的位置是固定的，那样很不方便多个位置的弹出层调用，所以那个弹出层不够实用，今天写了个利用JavaScript的offset和CSS中position:absolute来绝对定位的弹出层实例，非常实用的，呵呵，下面是比较粗略的代码，你可以通过修改“鼠标移过来！”文字的样式来任意改变其位置来看效果。

<!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>弹出层的定位js</title> <style type="text/css"> *{ padding:0; margin:0; list-style-type:none;} body{font-family: "宋体";font-size: 12px;} #words{ width:80px; height:20px; line-height:20px; border:1px #06C dashed; text-align:center; margin:20px auto auto auto; cursor:pointer;} #theDiv{ width:300px; height:200px; border:1px #00F solid; background-color:#E8F5FD; position:absolute; display:none;} </style> <script language="javascript" type="text/javascript"> function showdiv(){ var pt = document.getElementById("theDiv"); var mt =document.getElementById("words"); pt.style.left = mt.offsetLeft+"px"; pt.style.top = mt.offsetTop+30+"px"; pt.style.display = "block"; //alert(pt.style.top); //alert(pt.style.left); } function offdiv(){ document.getElementById("theDiv").style.display = "none"; } </script> </head> <body> <div id="theDiv"></div> <div id="words" onmouseover="showdiv()" onmouseout="offdiv()">鼠标移过来！</div> <div style="width:400px;margin:10px auto; text-align:center;">床前明月光，疑似地上霜，举头望明月，低头思故乡！ </div> </body> </html>

提示：你可以先修改部分代码再运行。