<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- <style type="text/css"> body{ height: 3000px; } </style> <script type="text/javascript"> window.onscroll=function(){ //onscroll 滚动事件 alert('滚动了') } </script> --> <!-- 以下是上下左右居中特效 <style type="text/css"> .box{ 100px; height: 100px; background-color: yellow; position: absolute; right: 0; top:0; } </style> <div id="box" class="box"></div> <script type="text/javascript"> var oDiv=document.getElementById('box'); var ch=document.documentElement.clientHeight; //获取可视区域的高度 var cw=document.documentElement.clientWidth;//获取可视区域的宽度 oDiv.style.top=(ch-oDiv.offsetHeight)/2+'px'; // offsetHeight获取元素高度 包括边框 oDiv.style.right=(cw-oDiv.offsetWidth)/2+'px'; //offsetWidth 元素高度获取 包括边框 </script> --> <!-- <style type="text/css"> #box{ 200px; height: 200px; background-color: yellow; position: absolute; right: 0px; top: 0px; } </style> <div id="box"></div> <script type="text/javascript"> var oDiv=document.getElementById('box'); var ch=document.documentElement.clientHeight; oDiv.style.top=(ch-oDiv.offsetHeight)/2+'px'; </script> --> <!-- 下面代码 滚动时上下居中 --> <!-- <style type="text/css"> body{ height: 3000px } #box{ 200px; height: 200px; background: #333; position: absolute; right: 0px; top: 0px; } </style> <div id="box"></div> <script type="text/javascript"> var oDiv=document.getElementById('box'); var ch=document.documentElement.clientHeight; //获取窗口可视高度 //算元素在上下的位置居中 = （可视区 - 元素尺寸） / 2 oDiv.style.top=(ch-oDiv.offsetHeight)/2+'px'; // 设置div的top 等于 可视高度减去元素高度差除以2 window.onscroll=function(){ var scrolltop=document.documentElement.scrollTop|document.body.scrollTop; // 获取文档 窗口滚动的高度 // 在（quirk 模式）的时候 document.body.scrollTop 在 Internet Explorer, Firefox, Opera, Google Chrome Safari 返回正确的值。 // 在（quirk 模式）的时候 document.documentElement.scrollTop 永远是零 // 非quirk模式的时候 document.documentElement.scrollTop Internet Explorer, Firefox and Opera 返回正确的值 但是在 Google Chrome ，Safari 中永远是零 oDiv.style.top=(ch-oDiv.offsetHeight)/2+scrolltop+'px'; } </script> --> <!-- 浏览器判断 <style> body{height: 3000px;} #box{ 200px; height: 100px; background-color: hotpink; position: fixed; _position: absolute; right: 0; top: 0; } </style> <div id="box"></div> <script language="JavaScript"> function getOs() { var OsObject = ""; if(navigator.userAgent.indexOf("MSIE")>0) { return "MSIE"; } if(navigator.userAgent.indexOf("Firefox")>0){ return "Firefox"; } if(isSafari=navigator.userAgent.indexOf("Safari")>0) { return "Safari"; } if(isCamino=navigator.userAgent.indexOf("Camino")>0){ return "Camino"; } if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){ return "Gecko"; } } alert("您的浏览器类型为:"+getOs()); </script> --> <!-- <style> body{height: 3000px;} #box{ 200px; height: 100px; background-color: hotpink; position: fixed; _position: absolute; right: 0; top: 0; } body{ _background-image: url('abc'); _background-attachment: fixed; } </style> <div id="box"></div> <script> var oDiv = document.getElementById('box'); var ch = document.documentElement.clientHeight; //算元素在上下的位置居中 = （可视区 - 元素尺寸） / 2 oDiv.style.top = ch - oDiv.offsetHeight + 'px'; window.onscroll = function(){ //检测浏览器版本 if(window.navigator.userAgent.indexOf('IE 6.0')!=-1){ var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; oDiv.style.top = scrollTop + ch - oDiv.offsetHeight + 'px'; } } </script> --> </body> </html>