记一次奇葩事——html5可能不支持window.onscroll函数
只在html5里遇到，html4没事；拿出来聊聊，路过帮忙解答下！！！
不正常的
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>浮动广告</title>
<script type="text/javascript">
var advInitTop=0;
var closeInitTop=0;
function init(){
advInitTop=parseInt(document.getElementById("advLayer").style.top.slice(0, -2));
closeInitTop=parseInt(document.getElementById("closeLayer").style.top.slice(0, -2));
}
function move(){
//控制广告图片总位于页面顶端左边位置
document.getElementById("advLayer").style.top=advInitTop+document.body.scrollTop;
//控制关闭图片总位于页面顶端左边位置
document.getElementById("closeLayer").style.top=closeInitTop+document.body.scrollTop;
}
function closeMe(){
//关闭“关闭图片”所在的层
document.getElementById("closeLayer").style.display="none";
//关闭“广告图片”所在的层
document.getElementById("advLayer").style.display="none";
}
//当页面拖动滚动条时调用move()函数
window.onscroll=move;
</script>
</head>
<body onLoad="init()">
<div id="closeLayer" onClick="closeMe()" style="position:absolute; left:16px; top:200px;width:31px; height:31px; z-index:2;">
<img src="img/close.png" width="30" height="30"></div>
<p><img src="img/2.jpg" width="1000" height="4700"></p>
<div id="advLayer" style="position:absolute; left:16px; top:200px; width:250px; height:180px; z-index:1;"><a href="http://www.baidu.com">
<img src="img/timg.jpg" width="250" height="180" border="0"></a></div>
</body>
</html>
正常的（注释了<!doctype html>）
--<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>浮动广告</title>
<script type="text/javascript">
var advInitTop=0;
var closeInitTop=0;
function init(){
advInitTop=parseInt(document.getElementById("advLayer").style.top.slice(0, -2));
closeInitTop=parseInt(document.getElementById("closeLayer").style.top.slice(0, -2));
}
function move(){
//控制广告图片总位于页面顶端左边位置
document.getElementById("advLayer").style.top=advInitTop+document.body.scrollTop;
//控制关闭图片总位于页面顶端左边位置
document.getElementById("closeLayer").style.top=closeInitTop+document.body.scrollTop;
}
function closeMe(){
//关闭“关闭图片”所在的层
document.getElementById("closeLayer").style.display="none";
//关闭“广告图片”所在的层
document.getElementById("advLayer").style.display="none";
}
//当页面拖动滚动条时调用move()函数
window.onscroll=move;
</script>
</head>
<body onLoad="init()">
<div id="closeLayer" onClick="closeMe()" style="position:absolute; left:16px; top:200px;width:31px; height:31px; z-index:2;">
<img src="img/close.png" width="30" height="30"></div>
<p><img src="img/2.jpg" width="1000" height="4700"></p>
<div id="advLayer" style="position:absolute; left:16px; top:200px; width:250px; height:180px; z-index:1;"><a href="http://www.baidu.com">
<img src="img/timg.jpg" width="250" height="180" border="0"></a></div>
</body>
</html>
记一次奇葩事——html5可能不支持window.onscroll函数的更多相关文章
- Google 做过的 12 件奇葩事
Google做了太多伟大的事情了.以至于有时它有点让人难以实时跟上它的动态.假设你对这家公司略微有点感情.看看他们做过的一些有点匪夷所思的事儿,可能认为,毕竟是大公司.还挺难以被全然理解透的. 一个Q ...
- html5中不再支持的元素
html5中不再支持的元素:1.acronym(建议abbr) : 定义首字母缩写2.applet(建议object): 定义 applet3.basefont(使用css控制)4.big(使用css ...
- [HTML5] 让IE支持HTML5的方法
越来越多的站点开始使用 HTML5 标签,但是目前的情况是还有很多人在使用IE6.IE7.IE8.为了让所有浏览者都可以正常的访问,解决方案有下面两个: 1.为网站创建多套模板,通过程序对User-A ...
- KB奇遇记(5)：奇葩的用人制度
8月份入职,公司不给我们正式任命,导致了我们开展工作困难重重,基本上很少有人会鸟你,做事仿佛名不正言不顺.哪怕你是未来信息部的老大也一样,网管们根本不买你的账.所以做ERP选型,做旧OA的选型以及加密 ...
- java web开发中的奇葩事web.xml中context-param中的注释
同事提交了代码.结果除同事之外,其他人全部编译报错.报错说web.xml中配置的一个bean 没有定义.按照报错提示,各种找,无果. 由于代码全部都是提交到svn主干,之前也没有做过备份,只能一步一步 ...
- HTML5的浏览器支持方案
现代的浏览器基本都支持 HTML5,此外还有老浏览器. 不管是旧的还是最新的,HTML5对无法识别的元素会作为内联元素自动处理. 所以,在这里教大家怎么让浏览器去处理"未知"的HT ...
- HTML5 中canvas支持触摸屏的签名面板
1.前言 最近实在是太忙了,从国庆之后的辞职,在慢慢的找工作,到今天在现在的这家公司上班大半个月了,太多的心酸泪无以言表,面试过程中,见到的坑货公司是一家又一家,好几家公司自己都只是上一天班就走了,其 ...
- 检测浏览器对HTML5和CSS3支持情况的利器——Modernizr
Modernizr是什么? Modernizr 是一个用来检测浏览器功能支持情况的 JavaScript 库. 目前,通过检验浏览器对一系列测试的处理情况,Modernizr 可以检测18项 CSS3 ...
- HTML5 的绘图支持- canvas
Canvas HTML5新增了一个canvas元素,它是一张空画布,开发者需要通过JavaScript脚本进行绘制. 在canvas上绘图,经过如下3步 (1) 获取canvas元素对应的DOM对象. ...
随机推荐
- Effective Modern C++：06lambda表达式
lambda表达式实际上是语法糖,任何lambda表达式能做到的,手动都能做到,无非是多打几个字.但是lambda作为一种创建函数对象的手段,实在太过方便,自从有了lambda表达式,使用复杂谓词来调 ...
- 集合--Collection接口详解&&迭代器
/* * 集合的顶层接口--Collection接口 * 添加 * add() * addAll() * * 遍历集合 * iterator() 迭代器 * * 删除 * remove() * rem ...
- hdu5289 RMQ+二分
RMQ预处理最大值,最小值,然后对于每一点,二分可能满足的区间长度,长度-1就是该店开始的区间满足的个数. #include<stdio.h> #include<string.h&g ...
- Java练习 SDUT-2561_九九乘法表
九九乘法表 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 九九乘法表是数学学习的基础,今天我们就来看看乘法表的相关问题 ...
- QT_OPENGL-------- 2.shader
用可编程管线绘制一个三角形 1.以上一节window为基准,进行绘制. 2.下载编译glew,并在.pro添加动态链接,并在头文件中引用. LIBS +=-L/usr/lib64 -lGLEW 可能根 ...
- 快速删除项目中的输出日志console.log
项目开发时,控制台往往有许多忘记删除或注释掉的输出日志.但是上线后总不能一个一个删吧,最近总结出几个解决思路 重写console.log方法,使其失去 输出能力 这个最直接有效,用vue框架的话放在m ...
- React Native自定义导航栏
之前我们学习了可触摸组件和页面导航的使用的使用: 从零学React Native之09可触摸组件 - 从零学React Native之03页面导航 - 经过之前的学习, 我们可以完成一个自定义导航栏了 ...
- Charles配置信息
1.下载Charles https://www.charlesproxy.com/download/ 2.破解 https://www.zzzmode.com/mytools/charles/ 或者 ...
- Redis源码解析：06整数集合
整数集合(intset)是集合键的底层实现之一,当一个集合只包含整数值元素,并且这个集合的元素数量不多时,Redis就会使用整数集合作为集合键的底层实现. intset可以保存类型为int16_t,i ...
- Knative Tracing 介绍
摘要: 一个完整的业务实现想要基于 Serverless 模型来开发的话可能会分解成多个 Serverless 模块,每一个模块单独通过 Knative 的 Serving 部署,那么这些不同的 Se ...