记一次奇葩事——html5可能不支持window.onscroll函数

只在html5里遇到，html4没事；拿出来聊聊，路过帮忙解答下！！！

 

不正常的

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>浮动广告</title>
 6 <script type="text/javascript">
 7 var advInitTop=0;
 8 var closeInitTop=0;
 9 function init(){
10 advInitTop=parseInt(document.getElementById("advLayer").style.top.slice(0, -2));
11 closeInitTop=parseInt(document.getElementById("closeLayer").style.top.slice(0, -2));
12 }
13 function move(){
14 //控制广告图片总位于页面顶端左边位置
15 document.getElementById("advLayer").style.top=advInitTop+document.body.scrollTop;
16 //控制关闭图片总位于页面顶端左边位置
17 document.getElementById("closeLayer").style.top=closeInitTop+document.body.scrollTop;
18 }
19 function closeMe(){
20 //关闭“关闭图片”所在的层
21 document.getElementById("closeLayer").style.display="none";
22 //关闭“广告图片”所在的层
23 document.getElementById("advLayer").style.display="none";
24 }
25 //当页面拖动滚动条时调用move()函数
26 window.onscroll=move;
27 </script>
28 </head>
29 <body onLoad="init()">
30 <div id="closeLayer" onClick="closeMe()" style="position:absolute; left:16px; top:200px;width:31px; height:31px; z-index:2;">
31 <img src="img/close.png" width="30" height="30"></div>
32 <p><img src="img/2.jpg" width="1000" height="4700"></p>
33 <div id="advLayer" style="position:absolute; left:16px; top:200px; width:250px; height:180px; z-index:1;"><a href="http://www.baidu.com">
34 <img src="img/timg.jpg" width="250" height="180" border="0"></a></div>
35 </body>
36 </html>

 

 

正常的（注释了<!doctype html>）

 1 --<!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>浮动广告</title>
 6 <script type="text/javascript">
 7 var advInitTop=0;
 8 var closeInitTop=0;
 9 function init(){
10 advInitTop=parseInt(document.getElementById("advLayer").style.top.slice(0, -2));
11 closeInitTop=parseInt(document.getElementById("closeLayer").style.top.slice(0, -2));
12 }
13 function move(){
14 //控制广告图片总位于页面顶端左边位置
15 document.getElementById("advLayer").style.top=advInitTop+document.body.scrollTop;
16 //控制关闭图片总位于页面顶端左边位置
17 document.getElementById("closeLayer").style.top=closeInitTop+document.body.scrollTop;
18 }
19 function closeMe(){
20 //关闭“关闭图片”所在的层
21 document.getElementById("closeLayer").style.display="none";
22 //关闭“广告图片”所在的层
23 document.getElementById("advLayer").style.display="none";
24 }
25 //当页面拖动滚动条时调用move()函数
26 window.onscroll=move;
27 </script>
28 </head>
29 <body onLoad="init()">
30 <div id="closeLayer" onClick="closeMe()" style="position:absolute; left:16px; top:200px;width:31px; height:31px; z-index:2;">
31 <img src="img/close.png" width="30" height="30"></div>
32 <p><img src="img/2.jpg" width="1000" height="4700"></p>
33 <div id="advLayer" style="position:absolute; left:16px; top:200px; width:250px; height:180px; z-index:1;"><a href="http://www.baidu.com">
34 <img src="img/timg.jpg" width="250" height="180" border="0"></a></div>
35 </body>
36 </html>

 

 

posted @ 2019-07-09 18:06  ꧁执笔小白꧂  阅读(341)  评论(0)  编辑  收藏  举报