兼容当前HTML/XHTML文档是否有DTD声明：
以下为程序代码：
var xtop = document.documentElement.scrollTop || document.body.scrollTop
var xtop = document.documentElement.scrollTop || document.body.scrollTop
从例子中我们可以得出一个层垂直居中于网页的CSS解决方案：
以下为程序代码：
.floatad {
height:400px;
top:50%;
margin-top:-200px;
}
/*关键技巧就在top和margin-top上*/
.floatad {
height:400px;
top:50%;
margin-top:-200px;
}
/*关键技巧就在top和margin-top上*/
具体代码：
以下为程序代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="zh-CN">
<head profile="http://gmpg.org/xfn/11">
<title>对联广告</title>
<style type="text/css">
.floatad {
position:absolute;
width:100px;
height:400px;
top:50%;
margin-top:-200px;
background:red;
}
#float1 {
left:0px;
}
#float2 {
right:0px;
}
</style>
</head>
<body>
<div style="height:3000px"></div>
<div id="float1" class="floatad"><a href="javascript:FloatDiv.Close('float1');">×</a></div>
<div id="float2" class="floatad"><a href="javascript:FloatDiv.Close('float1','float2');">×</a></div>
<script>
var FloatDiv = {
Float : function (){
var xtop = document.documentElement.scrollTop || document.body.scrollTop;
for(var i = 0; i < arguments.length; i ++){
var _float = document.getElementById(arguments[i]);
_float.style.top = "50%";
_float.style.marginTop = parseFloat(xtop) - parseFloat(_float.clientHeight) / 2 + "px";
}
},
Close : function (){
for(var i = 0; i < arguments.length; i ++){
var _float = document.getElementById(arguments[i]);
_float.style.display = "none";
}
}
};
window.onscroll = function () {FloatDiv.Float("float1", "float2");}
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="zh-CN">
<head profile="http://gmpg.org/xfn/11">
<title>对联广告</title>
<style type="text/css">
.floatad {
position:absolute;
width:100px;
height:400px;
top:50%;
margin-top:-200px;
background:red;
}
#float1 {
left:0px;
}
#float2 {
right:0px;
}
</style>
</head>
<body>
<div style="height:3000px"></div>
<div id="float1" class="floatad"><a href="javascript:FloatDiv.Close('float1');">×</a></div>
<div id="float2" class="floatad"><a href="javascript:FloatDiv.Close('float1','float2');">×</a></div>
<script>
var FloatDiv = {
Float : function (){
var xtop = document.documentElement.scrollTop || document.body.scrollTop;
for(var i = 0; i < arguments.length; i ++){
var _float = document.getElementById(arguments[i]);
_float.style.top = "50%";
_float.style.marginTop = parseFloat(xtop) - parseFloat(_float.clientHeight) / 2 + "px";
}
},
Close : function (){
for(var i = 0; i < arguments.length; i ++){
var _float = document.getElementById(arguments[i]);
_float.style.display = "none";
}
}
};
window.onscroll = function () {FloatDiv.Float("float1", "float2");}
</script>
</body>
</html>
演示：
Floatad-js.htm （1.36 KB）
站长工具
相关文章
请稍等，评论加载中...