javaScript之BOM操作1

时间:2017-01-07  |  来源:cnphp6
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #div1 {width:100px; height:100px; background:red; position: absolute; right:0;}
  </style>
  <script>
	window.onresize = window.onload = window.onscroll = function() {
		var oDiv = document.getElementById("div1");
		var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
		var t = (document.documentElement.clientHeight - oDiv.offsetHeight)/2; 
		oDiv.style.top = scrollTop + t + "px";
	}
  </script>
 </head>
 <body style="height:2000px;">
  <div id="div1"></div>
 </body>
</html>

  这种方法可以将div块实时显示到可视区中间,但是会出现闪烁问题。解决办法1:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #div1 {width:100px; height:100px; background:red; position: fixed; right:0; top:50%; margin-top:-50px;}
  </style>
 </head>
 <body style="height:2000px;">
  <div id="div1"></div>
 </body>
</html>

  通过css布局解决闪烁问题,但是IE6并不支持fixed。可以使用动画滑入的方式解决IE6的固定定位问题,暂时不录入本文中。