一，此例中通过鼠标点击事件在网页的中心位置创建一个盒子，不管浏览器变小，或是有卷曲的网页，盒子都会在浏览器正中央
主要方法：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>
