制作符合WEB标准的QQ弹出消息(jQuery)
网上有好多的浮动层之类的代码，所谓的浮动层，就是层里的内容会随着页面的滚动而滚动，很多网站上都有的“QQ在线服务”就是个很好的例子，目前本人工作的这个网站中也需要用到了“QQ在线服务”，于是自己从网上下载了N多源码，这些源码运行起来是没有问题的，可是当我把其中的一些重要代码粘贴到vs中新建的ASPX页面的时候，运行ASPX页面的时候就不能随着页面的滚动而滚动了。 仔细对比ASPX页面代码和他的源码后发现，原来问题出现在DOCTYPE定义上，那些源码N多都是没有定义到DOCTYPE的，而新建的每个一ASPX页面都会有如下DOCTYPE定义：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
网上搜索后发现，这是目前很多网页都采用的标准，正好自己目前又在学习JQUERY，就想自己写一个符合WEB标准的浮动出来，首先研究一下之前下载的那些源码，找到浮动层的编写思路： 层可以随着页面滚动而滚动，说明肯定是脱离了标准流的，所以在层的CSS定义中以下的这句代码肯定少不了：
position:absolute;
position:absolute;
紧接着，因为是上下移动，所以就是要改变层的CSS样式中的top属性，注意是小写的，如果在代码中写大写的话那是会出错的，因为要符合“标准”... 那我们又如何改变top属性呢？在每回页面滚动的时候，都会有一个滚动的高度，也就是scrollTop，我们就可以在每回页面滚动的时候把我们原来层的top+滚动的高度，这样也就成了。 接下来问题又来了，scrollTop的获取IE和非IE的又有不同，经搜索得知，可用如下代码获取scrollTop：
var bodyTop = 0;
if (typeof window.pageYOffset != 'undefined') {
bodyTop = window.pageYOffset;
} else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
bodyTop = document.documentElement.scrollTop;
}
else if (typeof document.body != 'undefined') {
bodyTop = document.body.scrollTop;
}
var bodyTop = 0;
if (typeof window.pageYOffset != 'undefined') {
bodyTop = window.pageYOffset;
}
else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
bodyTop = document.documentElement.scrollTop;
}
else if (typeof document.body != 'undefined')
{
bodyTop = document.body.scrollTop;
}
经过上面的分析我们知道，只要在每回页面滚动的时候都重新设置层的top属性即可。下面是我用自己写的源码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="qqonline.aspx.cs" Inherits="qqonline" %>
<!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 runat="server">
<title>浮动广告</title>
<style type="text/css">
#qqonline{
background-color:Yellow;
border: 1px solid #fcc;
position:absolute;
top:250px;
left:16px;
width:200px;
height:120px;
}
</style>
<script src="jquery-1.2.6.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).scroll(function() { // 页面发生scroll事件时触发
var bodyTop = 0;
if (typeof window.pageYOffset != 'undefined') {
bodyTop = window.pageYOffset;
} else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
bodyTop = document.documentElement.scrollTop;
}
else if (typeof document.body != 'undefined') {
bodyTop = document.body.scrollTop;
}
$("#qqonline").css("top", 250 + bodyTop) // 设置层的CSS样式中的top属性, 注意要是小写，要符合“标准”
$("#qqonline").text(bodyTop); // 设置层的内容，这里只是显示当前的scrollTop
});
</script>
</head>
<body style="height:1800px"><!-- 给BODY加个样式，让页面出现滚动条 -->
<form id="form1" runat="server">
</form>
<div id="qqonline">
QQ在线服务
</div>
</body>
</html>
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="qqonline.aspx.cs" Inherits="qqonline" %><!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 runat="server">
<title>浮动广告</title>
<style type="text/css">
#qqonline{
background-color:Yellow;
border: 1px solid #fcc;
position:absolute;
top:250px;
left:16px;
width:200px;
height:120px;
}
</style>
<script src="jquery-1.2.6.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).scroll(function()
{
// 页面发生scroll事件时触发
var bodyTop = 0;
if (typeof window.pageYOffset != 'undefined')
{
bodyTop = window.pageYOffset;
}
else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')
{
bodyTop = document.documentElement.scrollTop;
}
else if (typeof document.body != 'undefined')
{
bodyTop = document.body.scrollTop;
}
$("#qqonline").css("top", 250 + bodyTop) // 设置层的CSS样式中的top属性, 注意要是小写，要符合“标准”
$("#qqonline").text(bodyTop); // 设置层的内容，这里只是显示当前的scrollTop });
</script></head><body style="height:1800px"><!-- 给BODY加个样式，让页面出现滚动条 -->
<form id="form1" runat="server"> </form>
<div id="qqonline"> QQ在线服务 </div>
</body>
</html>
因为新建立的是ASPX页面，所以开头有<%@那句，不过在后置代码里是什么都没有写。 最后运行页面，即可看到，随着页面滚动的滚动，层总是保持在同一个地方。 以上代码经测试，IE6,IE7,IE8 b2，FF,OPERA,插肉咪（chrome）浏览器都能正确的显示，而且页面还符合“标准”。 从以上得知，一般来说“标准”都有两个，一个是强者制定的标准（IE），一个是由众多与强者相对的弱者组合起来制定的标准，俗话说分久必合，可看来我想等到我去见毛爷爷的那一天都合不了啊！！！
