记一次奇葩事——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;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; 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;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; 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>