搜索:
首页 >> JavaScript >> Javascript特效 >> 原创一个js对联广告类(兼容FireFox)

原创一个js对联广告类(兼容FireFox)

2008-8-1 作者:biyuan 来源:biyuan的专栏 投递文章

兼容当前HTML/XHTML文档是否有DTD声明:

以下为程序代码:
var xtop = document.documentElement.scrollTop || document.body.scrollTop

从例子中我们可以得出一个层垂直居中于网页的CSS解决方案:

以下为程序代码:
.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>

演示:Floatad-js.htm (1.36 KB)

Tags:对联  广告  firefox 
相关文章
手机版 Javascript特效 Asp之家 Aspxhome.com
闽ICP备06017341号