- 浏览: 699979 次
- 性别:
- 来自: 南宁
文章分类
最新评论
-
如果我爱上你的笑容:
牛腩老师讲的课很棒 目前新闻发系统学习中 `(*∩_∩*)′
64位win8.1系统安装intelhaxm -
k04110411:
jhlovett 写道牛哥,想问下 public void P ...
ASP.NET通过HTML的上传文件标签来上传文件 -
liuzhijie3:
我也留个脚印用到了,讲的不错
.NET中获取字符串的MD5码 -
han_yankun2009:
,楠老师不错呀
在一堆数中查询相加得某个数的组合 -
allstara609:
请问牛老师,datalist中如何去掉数字中多余的0?
去掉数字中多余的0(ASP.NET)
网上有好多的浮动层之类的代码,所谓的浮动层,就是层里的内容会随着页面的滚动而滚动,很多网站上都有的“QQ在线服务”就是个很好的例子,目前本人工作的这个网站中也需要用到了“QQ在线服务”,于是自己从网上下载了N多源码,这些源码运行起来是没有问题的,可是当我把其中的一些重要代码粘贴到vs中新建的ASPX页面的时候,运行ASPX页面的时候就不能随着页面的滚动而滚动了。
仔细对比ASPX页面代码和他的源码后发现,原来问题出现在DOCTYPE定义上,那些源码N多都是没有定义到DOCTYPE的,而新建的每个一ASPX页面都会有如下DOCTYPE定义:
网上搜索后发现,这是目前很多网页都采用的标准,正好自己目前又在学习JQUERY,就想自己写一个符合WEB标准的浮动出来,首先研究一下之前下载的那些源码,找到浮动层的编写思路: 层可以随着页面滚动而滚动,说明肯定是脱离了标准流的,所以在层的CSS定义中以下的这句代码肯定少不了:
紧接着,因为是上下移动,所以就是要改变层的CSS样式中的top属性,注意是小写的,如果在代码中写大写的话那是会出错的,因为要符合“标准”...
那我们又如何改变top属性呢?在每回页面滚动的时候,都会有一个滚动的高度,也就是scrollTop,我们就可以在每回页面滚动的时候把我们原来层的top+滚动的高度,这样也就成了。
接下来问题又来了,scrollTop的获取IE和非IE的又有不同,经搜索得知,可用如下代码获取scrollTop:
经过上面的分析我们知道,只要在每回页面滚动的时候都重新设置层的top属性即可。下面是我用自己写的源码:
因为新建立的是ASPX页面,所以开头有<%@那句,不过在后置代码里是什么都没有写。
最后运行页面,即可看到,随着页面滚动的滚动,层总是保持在同一个地方。
以上代码经测试,IE6,IE7,IE8 b2,FF,OPERA,插肉咪(chrome)浏览器都能正确的显示,而且页面还符合“标准”。
从以上得知,一般来说“标准”都有两个,一个是强者制定的标准(IE),一个是由众多与强者相对的弱者组合起来制定的标准,俗话说分久必合,可看来我想等到我去见毛爷爷的那一天都合不了啊!!!
仔细对比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),一个是由众多与强者相对的弱者组合起来制定的标准,俗话说分久必合,可看来我想等到我去见毛爷爷的那一天都合不了啊!!!
评论
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().
# 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 ; 呵呵。
就可以了。
因为始终有一个为 0 ; 呵呵。
发表评论
-
jquery制作select列表双向选择
2010-06-15 12:43 1849做项目的时候要用到的一个小功能,以前做过的,用的纯JS ... -
锋利的jQuery实例-图片滚动
2009-11-15 16:02 2744效果看图: 点击按钮后的动画思路倒很容易弄懂,主要就是开始的 ... -
jquery访中关村商城排行榜特效
2009-08-08 11:04 1711目前公司的网站上要用到的效果,其实也算不上什么特效,无非 ... -
框架frame自适应内容高度
2009-07-31 16:17 2976让框架frame自动适应内容的高度 在每个框架子页面中加入如下 ... -
jQuery插件—获取URL参数
2009-06-20 12:44 3975做的项目中需要用到通过JS获取GET参数,上网找了一下,找到如 ... -
中关村网站产品参数页的参数纠错的制作
2009-06-16 21:20 993今天突然想在正在做的网站中加上个像中关村一样的参数纠错的功能, ... -
鼠标移到某一元素则在元素旁边出现弹出框
2009-05-12 20:54 1854类似于当当网的发货以后的那个发货反馈,鼠标移上去后自动会 ... -
JQuery控制图片无缝滚动
2009-05-10 21:05 6398经常有人问怎么在HTML上制作图片的无缝滚动,我自己在一些项目 ... -
jquery xpath详解
2009-02-17 11:27 3141比如下面html代码 <ul> <li cl ... -
jQuery中使用插件解决ie6下selectfqg元素设置z-index无效的问题!
2009-02-11 11:05 3976没用插件时的效果如下,这是在IE6下预览的结果,层 ... -
jQuery控制元素间隔滚动!
2009-01-12 12:14 1854只记录了本人需要用到的,转载自http://www.yaosa ... -
jquery中筛选表格的特定行数后进行操作
2009-01-06 11:55 3027项目中有个地方,一个页面显示两种商品,显示商品参数的时 ... -
jQuery插件_jcarousel(用于图片滚动)
2008-12-26 14:17 7601效果图如下: 目前制作的项目中用到,先记下来,以备不时之需 ... -
制作多级滑动tab菜单
2008-11-26 11:47 4385效果演示网站:http://kr.shopping.yahoo ... -
jQuery实战(四) - tab菜单
2008-11-19 13:55 2306很多天前就已经看完jQuery实战第四讲了,不过一直没有时间做 ... -
jQuery实战(三)
2008-11-16 15:37 2036刚刚看完第三讲,是用jQuery制作下拉菜单,自己也试着做了一 ... -
只能输入数字的文本框(兼容ie6,7,8,opera,ff,chrome)
2008-11-16 10:36 5625星期天上班真不知道干什么事哦,只好随便看看之前下载的电子书了, ... -
jQuery实战(二)
2008-11-06 11:06 2982很久不上来写文章了,嘿嘿,最近在做一个简单的新闻发布系 ... -
制作符合WEB标准的QQ弹出消息(jQuery)
2008-10-29 11:49 4863这里所说的弹出消息指的是在网页右下角升起又下去的那种框框,在这 ... -
jQuery实战(一)
2008-10-27 12:02 5098从ITCAST上看到出了个jQuery实战的视频(ht ...
相关推荐
jQuery精美浮动层效果
非常强大的Jquery浮动层插件,值得推荐
Jquery左右浮动层 类似于点击收藏到
jQuery弹出层与浮动层 效果不错!可以看看!
绝对眼前一亮 页面 浮动层定位 滚动条上下 移动都在同一个位置,jquery实现
jQuery CSS图片浮动层效果
jQuery制作顶部浮动层显示隐藏点击图标按钮浮动展开
用jQuery实现div跟着鼠标走 鼠标移动时,层也跟着鼠标的移动而移动
jQuery插件,就是沿着一个角度弹来弹去的,代码写得不怎么样,不过效果达到了,调用很简单的,里面有调用例子。ie6/ie7/ie8/firefox下都能用
弹出浮动层漂亮登录框 Jquery
jquery div容器拖拽放大缩小浮动层代码
JQuery弹出层,JS浮动层,弹出层特效,JQuery浮动层,JQuery登录浮动层,JQuery登录弹出层 JQuery弹出层效果,可用于弹出登录框,也可用于Ajax应用等
弹出登录框的JQuery弹出浮动层,浮动层可以是另外的页面。无刷新弹层
jquery浮动固定层导航描点上下滚动的浮动定位层
jquery弹出左侧隐藏的浮动层
jQuery网页底部阴影浮动层文字滚动
符合web标准的浮动广告(图片漂浮广告)效果代码.zip
基于jQuery精美浮动层效果 基于jQuery精美浮动层效果
注意:那个如果你的模板有CSS文件的话,就要直接引入到本页面就行了,这个简化版不能在别的框架弹出层的,所以也就没有了那个cssurl属性了,也没有target 属性了