原创一个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
0
投稿猜你喜欢
认清区别CSS的类class和id
2007-10-08 12:02:00
SQL Server 2000 占内存居高不下可能的原因及其解决方法
2010-04-25 10:39:00
求英文字母或数字或下划线或汉字的js正则表达式
2009-08-04 17:59:00
asp如何建立和删除文件夹？
2009-11-26 20:34:00
asp获取远程网页的指定内容的实现代码
2011-02-16 10:41:00
asp如何建立MYSQL数据库的连接？
2009-11-26 20:30:00
dl,dt,dd标签 VS 传统table实现数据列表
2009-08-02 20:45:00
asp 性能测试报告 学习asp朋友需要了解的东西
2011-03-09 10:57:00
完美的js验证网址url（正则表达式）
2008-06-07 09:36:00
JavaScript链式调用的设计
2009-12-04 12:46:00
对设计文档的一点小看法
2010-03-15 12:30:00
asp如何用SA-FileUp上传多个HTML文件？
2010-05-18 18:27:00
Study jQuery in a Simplified Way
2010-01-30 12:55:00
conn.execute的用法
2008-07-03 12:58:00
Sql Server 2005读取外部数据的方法
2008-07-08 19:08:00
网页设计配色基础：RGB与HSB
2008-05-06 12:23:00
一种有创意的CSS命名规则
2008-06-15 15:18:00
SQL Server备份和灾难恢复
2010-07-02 12:54:00
ASP实现全站的301跳转
2010-03-27 21:45:00
response.setHeader()方法设置http文件头的值
2010-03-11 22:43:00