浏览 2017 次
|
锁定老帖子 主题：在链接处创建DIV，定位问题解决
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-01-08
最后修改：2010-01-11
最近在研究指定HTML元素的offsetLeft与offsetTop的值，当前的版本兼容IE6+，FireFox3+，可以在mouse移动到链接上时，在链接右中下角准确创建div。
效果如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>divpostion.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
.report{
margin:10px;
width:500px;
border:2px;
border-style: solid;
border-color: green;
}
.conts{
margin:20px;
width:60%;
border: 1px;
border-style: solid;
border-color: blue;
}
.hrefs{
margin: 15px;
width:50%;
border-width:2px;
border-color: #999;
border-style: solid;
}
ul.tes{
height:220px;
}
ul.tes li{
height:50px;
line-height:30px;
display:inline;
}
ul.tes li a {
width: 150px;
height: 30px;
border: 1px;
border-color: red;
border-style: solid;
}
a:hover {
background: #cfc;
}
</style>
<script type="text/javascript">
function createTip(){
var _tips = document.getElementById("myTip");
if(typeof(_tips)=="undefined"||_tips == null)
{
_tips = document.createElement("div");
_tips.id = "myTip";
_tips.style.position = "absolute";
_tips.style.borderWidth = "1px";
_tips.style.fontSize = "9pt";
_tips.style.filter = "progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3)";
_tips.style.padding = "5px 8px 3px 8px";
_tips.style.width="300px";
_tips.style.height="200px";
_tips.style.display="none";
_tips.style.background="url(images/tip.gif) no-repeat left top";
document.body.appendChild(_tips);
}
return _tips;
}
/**
判断IE版本
function IEversion(){
var version=navigator.appVersion;
//alert(navigator.appVersion);
if(navigator.appName =="Microsoft Internet Explorer")
alert("your browser is IE"+parseInt(version.split(" ")[3]));
}
*/
function showtips(link){
var tip=createTip();
tip.style.display="";
var obj=link;
var left=obj.offsetLeft;
while((obj=obj.offsetParent)!=null){
left+=obj.offsetLeft;
/* 这里有一个问题尚未解决，因为IE7以下版本，offsetLeft与offsetTop没有将borderWidth的值加进去。
当border-width大于0时，这里就漏加了N*borderWidth. 这里遇到一个问题是，border-width的默认属性是medium,
所以没有手动设置border或者border-width时，默认为medium,用parseInt()转得到的是NAN，到底怎么解决？？？？
var wid=obj.style.borderLeftWidth;
wid=parseInt(wid);
alert(wid||0);
left+=wid>0?wid:0;
*/
}
left+=30;
obj=link;
var top=obj.offsetTop;
var parent=obj.offsetParent;
if (window.ActiveXObject) { //IE浏览器
while(parent!=null && parent!=document.body){
top+=parent.offsetTop;
//var wid=obj.style.borderLeftWidth;
// wid=parseInt(wid);
//alert(wid||0);
//top+=wid||0;
parent=parent.offsetParent;
}
top+=35;
} else { //其他
top+=15;
}
tip.style.left=left+"px";
tip.style.top=top+"px";
tip.innerHTML="<p>offsetLeft="+left+"<br>offsetTop="+top+"</p>";
}
function chartlivess(){
var _tips = document.getElementById("myTip");
if(_tips!=null)
{
_tips.style.display="none";
}
}
</script>
</head>
<body>
<div class="report">
<div class="conts">
<div class="hrefs">
<ul id="testul" class="tes">
<li>
<a href="#" onmouseover="showtips(this)"
onmouseout="chartlivess()">click me1 </a>
</li>
<li>
<a href="#" onmouseover="showtips(this)"
onmouseout="chartlivess()">click me2 </a>
</li>
<li>
<a href="#" onmouseover="showtips(this)"
onmouseout="chartlivess()">click me3 </a>
</li>
<li>
<a href="#" onmouseover="showtips(this)"
onmouseout="chartlivess()">click me4 </a>
</li>
<li>
<a href="#" onmouseover="showtips(this)"
onmouseout="chartlivess()">click me5 </a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
不过，目前的版本仍然存在一些问题，待解决。
因为FF的offsetLeft与offsetTop是相对body定位的,而IE则是相对上一级的，所以 1.当设置ul,li,a的height时，FF都是正确的，IE就有错位。 2.还有一个问题没有解决的是，当上级对象有borderWidth时，定位也有问题。 因为IE7以下版本offsetLeft与offsetTop没有将borderWidth的值加进去。
2010-1-11号更新版本，解决上面两个问题，目前测试过IE6、IE7，FireFox3.5,IE8暂时没有测试。 由于border-width如果设置的话，一般是用px，而默认为medium,似乎等同于0的效果（个人鄙见，因为我现在只计算设置为border:xxpx和border-width:xxpx的情况，在IE与FireFox下测试，似乎定位没有问题。） 修改的部分如下： function showtips(link){
var tip=createTip();
tip.style.display="";
var obj=link;
var left=obj.offsetLeft;
while((obj=obj.offsetParent)!=null){
left+=obj.offsetLeft;
/* 这里有一个问题尚未解决，因为IE7以下版本，offsetLeft与offsetTop没有将borderWidth的值加进去。
当border-width大于0时，这里就漏加了N*borderWidth. 这里遇到一个问题是，border-width的默认属性是medium,
所以没有手动设置border或者border-width时，默认为medium,用parseInt()转得到的是NAN，到底怎么解决？？？？
*/
var wid=0;
if (window.ActiveXObject) {
wid=obj.currentStyle.borderLeftWidth;
}else{
wid=obj.style.borderLeftWidth;
}
if(wid.indexOf("px")!=-1){
var wids=wid.split("px");
wid=parseInt(wids[0]);
//alert(wid);
left+=wid>0?wid:0;
}
}
left+=30;
obj=link;
var top=obj.offsetTop;
/*IE浏览器,因为对于FireFox游览器，offsetTop是相对于Body的，而不是相对于上级对象，
所以不需要累加父级offsetTop,并且，FireFox已经所有对象的borderWidth都已经算在offsetTop/offsetLeft中了，所以也不需要再累加
各层的borderLeftWidth/borderTopWidth
*/
if (window.ActiveXObject) {
while((obj=obj.offsetParent)!=null){
top+=obj.offsetTop;
var wid=obj.currentStyle.borderTopWidth;
if(wid.indexOf("px")!=-1){
var wids=wid.split("px");
wid=parseInt(wids[0]);
top+=wid>0?wid:0;
}
parent=parent.offsetParent;
}
top+=35;
} else { //其他
top+=15;
}
tip.style.left=left+"px";
tip.style.top=top+"px";
tip.innerHTML="<p>offsetLeft="+left+"<br>offsetTop="+top+"</p>";
}
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
