一，此例中通过鼠标点击事件在网页的中心位置创建一个盒子，不管浏览器变小，或是有卷曲的网页，盒子都会在浏览器正中央
主要方法：clientWidth方法获取当前可见网页的宽度
document. documentElement.clientWidth;
获得网页中被卷去的宽高
document.documentElement.scrollLeft || window.pageXOffset || document.body.scrollLeft;
例：
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title></title> ???<style type="text/css"> ???????*{ ???????????margin: 0px; ???????????padding: 0px; ???????} ???</style> ???<script language="JavaScript"> ???????function $(oId){ ???????????return document.getElementById(oId); ???????} ???????function which(){ ???????????//clientWidth方法获取当前可见网页的宽度 ???????????var w=document. documentElement.clientWidth; ???????????var h=document. documentElement.clientHeight; ???????????//获得网页中被卷去的宽高 ???????????var sw=document.documentElement.scrollLeft || window.pageXOffset || document.body.scrollLeft; ???????????var sl=document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; ???????????//运算得到设置盒子的位置 ???????????var hh=w/2+sw; ???????????var ss=h/2+sl; ???????????//创建一个盒子并为其设置属性 ???????????var oDiv=document.createElement("div"); ???????????oDiv.style.width="100px"; ???????????oDiv.style.height="100px"; ???????????oDiv.style.display="block"; ???????????oDiv.style.position="absolute"; ???????????oDiv.style.left=hh+"px"; ???????????oDiv.style.top=ss+"px";// ???????????oDiv.style.marginLeft=hh+"px";// ???????????oDiv.style.marginTop=ss+"px"; ???????????oDiv.style.backgroundColor="black"; ???????????//设置盒子位置 ???????????$("container").appendChild(oDiv); ???????} ???</script></head><body><div id="container" style="height: 2000px;width: 2000px" ?onmousedown="which();"></div></body></html>二，addEventListener添加事件句柄
为网页添加一个盒子可跟随网页的向下滑动保持在网页旁边
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title></title> ???<script type="text/javascript" src="js/User3.js"></script> ???<style type="text/css"> ???????body{ ???????????width: 2000px; ???????????height: 2000px; ???????} ???????.box{ ???????????width: 150px; ???????????height: 200px; ???????????position: absolute; ???????????right: 20px; ???????????border: 1px solid red; ???????} ???????.aff{ ???????????transition:all 1s; ???????} ???</style> ???<script language="JavaScript"> ???????/* obj.addEventListener(xEvent,fn, true) ????????事件冒泡 ????????例: 当有父子关系的元素，都触发单击事件的时候，会形成事件流，事件流中的 ????????事件会依顺序逐个触发。 ????????addEventListener第三个参数说明 ????????第三个参数是指事件的冒泡触发顺序，false 表示从子元素到父元素依次触发事件。 ????????true ?表示从父元素到子元素依次触发事件。 ????????* */ ???????function $(oId){ ???????????return document.getElementById(oId); ???????} ????????function scrollEvent(obj,xEvent, fn) { ???????????if(obj.attachEvent){ ???????????????//添加事件句柄fn是传入的事件类型 ???????????????obj.attachEvent("on"+xEvent,fn); ???????????} ???????????if(obj.addEventListener){ ???????????????//添加事件句柄fn是传入的事件类型 ???????????????obj.addEventListener(xEvent,fn, true);//addEventListener ?w3c标准。 ???????????} ???????} ???????////DOMMouseScroll ?mousewheel ???????window.onload = function(){ ???????????dom.addClass( $("oDiv"),"aff"); ???????????var ?top=$("oDiv").style.top; ???????????//类型转换 ???????????top=parseInt(top); ???????????//调用scrollEvent函数传入想要设置的对象和事件和事件执行完调用的函数 ???????????scrollEvent(document,"scroll",function(){ ???????????????// ???????????????var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; ???????????????var h=scrollTop+top+"px"; ???????????????$("oDiv").style.top=h; ???????????}); ???????} ???</script></head><!--事件冒泡--><body ><div style="top:40px;" class="box" id="oDiv"></div></body></html>js：网页中的高和宽（document）
原文地址：http://www.cnblogs.com/dybe/p/8082229.html