原创一个js对联广告类（兼容FireFox）

作者：biyuan 来源：biyuan的专栏时间：2008-08-01 18:08:00　

兼容当前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）

标签：对联,广告,firefox

投稿

原创一个js对联广告类（兼容FireFox）

猜你喜欢

php数组中删除元素之重新索引的方法

Python中bisect的使用方法

SqlServer Mysql数据库修改自增列的值及相应问题的解决方案

Omi v1.0.2发布正式支持传递javascript表达式

Django操作cookie的实现

细化解析：MySQL 搜索中的大小写敏感性

一文带你了解MySQL基于规则的优化

pandas创建DataFrame对象失败的解决方法

IOS苹果AppStore内购付款的服务器端php验证方法(使用thinkphp)

利用一个简单的例子窥探CPython内核的运行机制

pandas中.loc和.iloc以及.at和.iat的区别说明

Python获取江苏疫情实时数据及爬虫分析

解决mac使用homebrew安装MySQL无法登陆问题

修改SQL Server 2005 sa用户密码的方法

Python Web框架Flask中使用新浪SAE云存储实例

利用Yahoo Pipes和jQuery做一个RSS挂件

想用户所想（感受亚马逊的设计）

numpy实现合并多维矩阵、list的扩展方法

Python Django Vue 项目创建过程详解

如何使用Django Admin管理后台导入CSV