符合WEB标准的浮动层（jQuery版）！ -

xfth2009

浏览: 50584 次
性别:
来自: 襄樊

最近访客更多访客>>

岐洛Hydrangea

zjy234432

sevenkingj

小小IT程序员

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

符合WEB标准的浮动层（jQuery版）！

博客分类：

牛腩的搏客收藏学习

Web jQuery QQ CSS IE

2008-10-26

文章分类: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">

网上搜索后发现，这是目前很多网页都采用的标准，正好自己目前又在学习JQUERY，就想自己写一个符合WEB标准的浮动出来，首先研究一下之前下载的那些源码，找到浮动层的编写思路：层可以随着页面滚动而滚动，说明肯定是脱离了标准流的，所以在层的CSS定义中以下的这句代码肯定少不了：

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;
            }

经过上面的分析我们知道，只要在每回页面滚动的时候都重新设置层的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>

因为新建立的是ASPX页面，所以开头有<%@那句，不过在后置代码里是什么都没有写。
最后运行页面，即可看到，随着页面滚动的滚动，层总是保持在同一个地方。
以上代码经测试，IE6,IE7,IE8 b2，FF,OPERA,插肉咪（chrome）浏览器都能正确的显示，而且页面还符合“标准”。
从以上得知，一般来说“标准”都有两个，一个是强者制定的标准（IE），一个是由众多与强者相对的弱者组合起来制定的标准，俗话说分久必合，可看来我想等到我去见毛爷爷的那一天都合不了啊！！！

分享到：

ASP.NET中过滤HTML字符串的两个方法 | jQuery实战(四) - tab菜单

2010-06-09 10:13
浏览 954
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

符合WEB标准的浮动层（jQuery版）！

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

符合WEB标准的浮动层（jQuery版）！

评论

发表评论

相关推荐

ASP.NET中读取excel内容,并显示在界面上

刚刚找到的IP地址对应地区数据库

使用javascript通过className来获取元素

ASP.NET中过滤HTML字符串的两个方法

jQuery实战(四) - tab菜单

JS实现图片轮换效果

JQuery控制图片无缝滚动

jQuery插件—获取URL参数

.NET中获取字符串的MD5码

通过密钥对字符串进行加解密（C#）

数字金额转为大写金额(C#)

对int数组进行从大到小的排序,并去除重复项

有关javascript模态窗口的使用

VS2008修改自定义模板

框架frame自适应内容高度

通过文件名检测文件是否存在于某文件夹中

jquery访中关村商城排行榜特效

中关村商城广告切换纯净代码

javascript倒计时

ASP.NET生成HTML静态页的一个类

最近访客更多访客>>