`
niunan
  • 浏览: 721114 次
  • 性别: Icon_minigender_1
  • 来自: 南宁
社区版块
存档分类
最新评论

符合WEB标准的浮动层(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),一个是由众多与强者相对的弱者组合起来制定的标准,俗话说分久必合,可看来我想等到我去见毛爷爷的那一天都合不了啊!!!
6
0
分享到:
评论
4 楼 edielei 2009-03-01  
IE6里无效啊!
3 楼 niunan 2009-02-03  
# 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; 
#             }
其实这一大串代码在jQuery中有一行代码可以代替,那就是
var bodyTop = $(document).scrollTop();
经测试,如果是写成$(window).scrollTop()的话则在IE系列下是没有值的,万恶的jQuery API竟然没有scrollTop().
2 楼 niunan 2008-10-27  
好像也是哦..呵呵 ...学习了...
1 楼 comasp 2008-10-26  
bodyTop = document.documentElement.scrollTop + document.body.scrollTop;  

就可以了。

因为始终有一个为 0 ; 呵呵。

相关推荐

    jQuery万能浮动框插件

    **jQuery万能浮动框插件**是Web开发中一种常用的技术,主要用于在网页上创建具有弹性和可定制的对话框或者提示窗口。这种插件基于JavaScript库jQuery,它简化了DOM操作,使得开发者能够轻松地实现动态显示和隐藏浮动...

    jquery弹出层 jquery弹出层 jquery弹出层

    弹出层,也称为模态窗口,是在用户与网页交互时临时出现在页面上的一个浮动元素,它遮盖住背景内容,直到用户与弹出层进行交互或关闭它。弹出层可以用于展示详细信息、进行表单填写、播放媒体等,而不干扰用户对主...

    jquery UI万能浮动

    jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集合,它提供了丰富的交互效果和可自定义的主题,适用于构建功能完善的Web应用程序。标题中的“万能浮动”可能指的是jQuery UI中的某种特定功能,如对话框...

    符合web标准且可单独关闭的多幅对联广告

    本篇将深入探讨如何创建符合Web标准且可单独关闭的多幅对联广告,以适应ASP编程环境。 首先,我们需要理解Web标准。Web标准主要包括HTML(超文本标记语言)、CSS(层叠样式表)和JavaScript,它们共同构成了网页的...

    PHP、jQuery、CSS、HTML等Web开发参考手册CHM文档

    jQuery还支持丰富的插件系统,为开发者提供了大量预先封装好的功能,如滑动效果、弹出对话框、轮播图等,极大地提高了Web开发效率。 【CSS】 CSS(Cascading Style Sheets)是用于描述HTML或XML(包括如SVG、MathML...

    div弹出层的ajax登录(Jquery版+c#)

    Div弹出层是网页设计中常用的一种技术,用于创建在用户交互时动态显示或隐藏的浮动窗口。在本例中,它被用作一个登录界面,当触发某个事件(如点击按钮)时,弹出层会出现在网页的前景,展示登录表单。Div弹出层...

    web网页基础设计大作业 html+css+纯jquery

    在大作业中,你需要熟练掌握各种基本标签的用法,例如`&lt;head&gt;`、`&lt;body&gt;`、`&lt;h1&gt;`-`&lt;h6&gt;`、`&lt;p&gt;`、`&lt;a&gt;`、`&lt;img&gt;`等,并理解如何创建符合语义的结构化文档。同时,了解HTML5的新特性,如`&lt;section&gt;`、`&lt;article&gt;`、`...

    jquery 插件 弹出层 CustomDropDownListStyling

    弹出层通常指的是在用户交互后出现的浮动窗口,可以用于显示更多信息或者操作选项。在下拉列表中应用弹出层,可以使用户在不离开当前视图的情况下查看或选择更多选项。 压缩包内的文件主要包括HTML(index4.html、...

    利用JQuery制作符合Web标准的QQ弹出消息

    本文介绍的是如何使用JQuery技术实现一个类似QQ消息提示框的弹出效果,即在网页的右下角弹出一个浮动的提示信息框。 要实现这个效果,首先需要确保JQuery库已经被正确加载到网页中。在文档加载完毕后,利用CSS将弹...

    web开发常用技术文档

    理解并熟练运用CSS2能帮助开发者创建出符合标准且具有良好可维护性的网页。 3. **JQuery_1.4_API.CHM**:jQuery是一个流行的JavaScript库,极大地简化了JavaScript的DOM操作、事件处理、动画制作等任务。jQuery 1.4...

    jquery UI插件

    2. **无障碍访问**:确保所有组件符合WCAG标准,使残障人士也能方便使用。 3. **更新维护**:保持jQuery UI版本的及时更新,以便获取最新的功能和安全修复。 综上所述,jQuery UI插件是开发富交互Web界面的强大...

    jquery.poshytip提示框插件鼠标悬停到文字上出现浮动.

    jQuery PoshyTip插件正是为此目的而设计,它允许开发者在鼠标悬停到特定文字或元素上时,呈现出美观且浮动的提示框。这一插件的使用既简单又灵活,能够极大地增强网站的交互性和用户友好性。 PoshyTip插件基于流行...

    扁平带浮动标签表单.rar_higherpmj_solidryh_扁平带浮动标签表单

    【标题】"扁平带浮动标签表单.rar" 指的是一款设计风格简洁、具有浮动标签效果的表单设计。这种表单设计通常应用于现代Web应用中,以提供更直观、用户友好的界面。"higherpmj" 和 "solidryh" 可能是项目开发者或团队...

    jquery-easyui-1.3.5

    这个`jquery-easyui-1.3.5`版本是该框架的一个特定发行版,下面将详细介绍这个版本包含的知识点。 首先,`jQuery` 是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互。jQuery EasyUI...

    flash实现右侧浮动在线客服代码.zip

    这是Web应用的标准入口文件,通常包含HTML标记语言,定义了网页的基本结构和内容。在这个项目中,`index.html`文件应该包含了浮动客服窗口的HTML布局,以及引入jQuery库和相关脚本的链接。 5. **images**: 这个...

    jquery easyui demo 1.24

    jQuery EasyUI 是一个基于 jQuery 的前端开发框架,它为开发者提供了大量的可重用的 UI 组件,使得构建功能丰富的 Web 应用程序变得简单快捷。标题中的 "jquery easyui demo 1.24" 提示我们,这是一个关于 jQuery ...

    jQueryEasyUI

    3. **JSP或Thymeleaf模板**:在视图层,可以使用JSP或Thymeleaf等模板引擎,结合jQueryEasyUI的HTML标签,生成符合框架规范的页面结构。 4. **数据绑定框架(如Hibernate、MyBatis)**:与ORM框架配合,简化数据库...

    jquery表单验证插件

    而"jquery表单验证插件"则是基于jQuery构建的一种工具,用于增强表单数据输入的验证功能,确保用户提交的数据符合预设的规则。这款插件极大地提高了用户体验,因为它可以在用户输入时即时反馈错误,而无需等待表单...

    页面浮动小人插件

    **页面浮动小人插件详解** 在网页设计与开发中,为了提高用户体验和交互性,开发者经常使用各种前端插件来实现独特的功能。"页面浮动小人插件"就是这样一种工具,它允许用户在操作页面时获取实时的交互提示,为用户...

    jQuery mobile图片放大技术

    jQuery Mobile 是基于 jQuery 库的一个框架,专门用于构建响应式、触摸友好的移动 Web 应用。它提供了丰富的 UI 组件,如按钮、滑块、表单和导航栏等,旨在简化移动应用的开发过程。在图片放大技术中,jQuery Mobile...

Global site tag (gtag.js) - Google Analytics