<!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{
width: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{
width: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{
width: 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{
width: 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{
width: 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>
