 |
热门文章 |
|
|
|
|
| 固定在浏览器显示区域内的弹出提示层 |
| 来源：中国站长天空 更新时间：2010/4/15 22:42:20 阅读次数： 我要投稿 |
|
<!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>
<title>固定在浏览器显示区域内的弹出提示层</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
*{margin:0;padding:0;}
#a{width:300px;height:300px;display:none;background:#cf0;position:absolute;z-index:2;}
#c div{position:absolute;background:#c00;width:50px;height:50px;}
#c div.d1{left:1000px;top:50px;}
#c div.d2{left:800px;top:500px;}
#c div.d3{left:10px;top:30px;}
#c div.d4{left:50px;top:650px;}
#c div.d5{left:500px;top:50px;}
#c div.d6{left:300px;top:300px;}
#c div.d7{left:1100px;top:700px;}
#c div.d8{left:300px;top:600px;}
</style>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div id="a">www.zzsky.cn</div>
<div id="c">
<div class="d1">中国站长天空</div>
<div class="d2">中国站长天空</div>
<div class="d3">中国站长天空</div>
<div class="d4">中国站长天空</div>
<div class="d5">中国站长天空</div>
<div class="d6">中国站长天空</div>
<div class="d7">中国站长天空</div>
<div class="d8">中国站长天空</div>
</div>
<script type="text/javascript">
function getStyle(obj,name){
return obj.currentStyle?obj.currentStyle[name]:(document.defaultView.getComputedStyle(obj,"").getPropertyValue(name))
}
for(var i=0;i<document.getElementById("c").getElementsByTagName("div").length;i++){
document.getElementById("c").getElementsByTagName("div")[i].onmouseover=function(){
var o=document.getElementById("a");
var s=document.getElementById("c");
if(!o.style.left)o.style.left=0;
if(!o.style.top)o.style.top=0;
var ow = getStyle(o,"width");
var oh = getStyle(o,"height");
var sl = getStyle(this,"left");
var st = getStyle(this,"top");
var sw = getStyle(this,"width");
var sh = getStyle(this,"height");
ow = parseInt(ow);
oh = parseInt(oh);
sl = parseInt(sl);
st = parseInt(st);
sw = parseInt(sw);
sh = parseInt(sh);
var x=(x<=ow+sw+10)?360:document.documentElement.clientWidth;
var y=(y<=oh+sh+10)?360:document.documentElement.clientHeight;
if(x < ow+sw){
o.style.left = sl+sw+10 + "px"
}else{
o.style.left = (x-sl-10 > ow)?(sl+sw+10 + "px"):(sl-ow-10 + "px");
}
if(y < ow+sw){
o.style.top = st+10 + "px"
}else{
o.style.top = (y-st-10 > oh)?(st+10 + "px"):(st-oh-10+sh + "px");
}
o.style.display="block";
}
document.getElementById("c").getElementsByTagName("div")[i].onmouseout=function(e){
var o=document.getElementById("a");
o.style.display="none";
}
}
</script>
</body>
</html> |
|
| 上一篇文章： 无法屏蔽的网页右下角浮动窗口下一篇文章： 可最小化和关闭的右下角浮动窗口 |
|
|
|
注册 登录
