在链接处创建DIV，定位问题解决

原创 于 2010-01-08 18:01:49 发布 · 159 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#IE #Firefox #CSS #Microsoft #浏览器

最近在研究指定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的值加进去。
当border-width大于0时，这里就漏加了N*borderWidth. 这里遇到一个问题是，border-width的默认属性是medium,所以没有手动设置border或者border-width时，默认为medium,用parseInt()转得到的是NAN，到底怎么解决？？？？

 

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>";

}

 

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值