（触发）window.onload;  window.onscroll;   window.onresize;

（兼容）网页可视区尺寸、网页全文尺寸、滚动距离

（实例）广告块高度动态居中、回到顶部

 

 

 

alert(window.navigator.userAgent);                //检测浏览器版本
window.location=‘http://www.miaov.com/‘;     //读写地址栏

 

 

 

浏览器窗口事件：

 

window.onload＝function(){}       //文档加载后事件

window.onscroll＝function(){}     //滚动条事件

window.onresize＝function(){}    //窗口大小改变事件

 

//网页可视区尺寸

//网页可视区尺寸：包括边线

document.body.offsetWidth;
document.body.offsetHeight;

//网页全文

//滚动距离
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;

//网页正文部分
window.screenTop;
window.screenLeft;

//屏幕分辨率
window.screen.height;
window.screen.width;

//屏幕可用工作区
window.screen.availHeight;
window.screen.availWidth;

 

 

 

 

js获取浏览器高度和宽度值,尽量的考虑了多浏览器。

IE中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
FireFox中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
Opera中：
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

没有定义W3C的标准，则
IE为：
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox为：
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
Opera为：
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）




HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标

document.documentElement.scrollTop 垂直方向滚动的值

event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

 

 

 

 

 

 

 

 

妙味实例：

//-------------------------------------------------------------------------------------------
//********妙味实例：视窗中保持上下居中************position:fixed(低版本ie中不支持)

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‘;     //运动效果有跳动，使用下一条函数
     startMove(oDiv,{top:scrollTop+t});
}

// 运动函数：开始
function getStyle(obj, attr) {
     if (obj.currentStyle) {
          return obj.currentStyle[attr];
     } else {
          return getComputedStyle(obj, false)[attr];
     }
}

function startMove(obj, json, fn) {
     clearInterval(obj.timer);
     obj.timer = setInterval(function() {
          var bStop = true; //这一次运动就结束了――所有的值都到达了
          for (var attr in json) {
               //1.取当前的值
               var iCur = 0;

               if (attr == ‘opacity‘) {
                    iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);
               } else {
                    iCur = parseInt(getStyle(obj, attr));
               }

               //2.算速度
               var iSpeed = (json[attr] - iCur) / 8;
               iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

               //3.检测停止
               if (iCur != json[attr]) {
                    bStop = false;
               }

               if (attr == ‘opacity‘) {
                    obj.style.filter = ‘alpha(opacity:‘ + (iCur + iSpeed) + ‘)‘;
                    obj.style.opacity = (iCur + iSpeed) / 100;
               } else {
                    obj.style[attr] = iCur + iSpeed + ‘px‘;
               }
          }

          if (bStop) {
               clearInterval(obj.timer);

               if (fn) {
                    fn();
               }
          }
     }, 30)
}
// 运动函数：结束
//-------------------------------------------------------------------------------------------


// ********************妙味实例：回到顶部*******************

window.onload=function ()
{
     var oBtn=document.getElementById(‘btn1‘);
     var bSys=true;
     var timer=null;
    
     //如何检测用户拖动了滚动条
     window.onscroll=function ()
     {
          if(!bSys)
          {
               clearInterval(timer);
          }
          bSys=false;
     };
    
     oBtn.onclick=function ()
     {
          timer=setInterval(function (){
               var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
               var iSpeed=Math.floor(-scrollTop/8);
              
               if(scrollTop==0)
               {
                    clearInterval(timer);
               }
              
               bSys=true;
               document.documentElement.scrollTop=document.body.scrollTop=scrollTop+iSpeed;
          }, 30);
     };
};

//-------------------------------------------------------------------------------------------

 

 

 

 

 

 

 

 

 

 

 

再谈 document.documentElement 与 document.body 的 scrollWidth、offsetWidth、clientWidth