亚洲另类97色波,四季久久免费一区二区三区四区,丰满蜜桃精品视频网,国产在线观看无码九色8X视频亚洲中文字幕久久精品无码喷水_国产精品无码一区二区

JavaScript 獲取窗口屬性

2018-8-3    seo達(dá)人

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

獲取窗口屬性

  • 查看滾動(dòng)條的滾動(dòng)距離 
    • window.pageXOffset/pageYOffset 
      • IE8及IE8以下不兼容
    • document.body/documentElement.scrollLeft/scrollTop 
      • 兼容性比較混亂,同時(shí)取兩個(gè)值相加,因?yàn)椴豢赡艽嬖趦蓚€(gè)同時(shí)有值
    • 封裝兼容性方法,求滾動(dòng)輪滾動(dòng)離getScrollOffset()

為了解決兼容性的問(wèn)題,我們來(lái)封裝一個(gè)函數(shù):

<script type="text/javascript">
    function getScrollOffset() {
        if(window.pageXOffset) { x : window.pageXoffset, y : window.pageYoffset }
        else{
            return { x : document.body.scrollLeft + document.documentElement.scrollLeft, y : document.body.scrollTop + document.documentElement.scrollTop,
            }
        }
    }
</script>
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 查看視口的尺寸 
    • window.innerWidth/innerHeight 
      • IE及IE8以下不兼容
    • document.documentElement.clientWidth/clientHeight 
      • 標(biāo)準(zhǔn)模式下,任意瀏覽器都兼容
    • document.body.clientWidth/clientHeight 
      • 適用于怪異模式(向后兼容)下的瀏覽器
    • 封裝兼容性方法,返回瀏覽器視口尺寸getViewportOffset()

為了解決兼容性的問(wèn)題,我們來(lái)封裝一個(gè)函數(shù):

<script type="text/javascript"> function getSViewportOffset() { if(window.innerWidth) { return {
                w : window.innerWidth,
                h : window.innerHeight
            }
        }else{ if(document.compatMode ==="BackCompat") { return {
                    w : document.body.clienWidth,
                    h : document.body.clientHeight
                }
            }else{ return {
                    w : document.documentElement.clientWidth,
                    h : document.documrntElement.clientHeight
                }
            }
    }
</script>
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 查看元素的幾何尺寸

    • domEle.getBoundingClientRect();
    • 兼容性很好
    • 該方法返回一個(gè)對(duì)象,對(duì)象里面有l(wèi)eft,top,right,bottom等屬性。left和top代表該元素左上角的X和Y坐標(biāo),right和bottom代表元素右下角的X和Y坐標(biāo)。
    • height和width屬性老版本IE不顯示(人為解決:分別相減一下就能得出)
    • 返回的結(jié)果并不是”實(shí)時(shí)的”
  • 讓滾動(dòng)條滾動(dòng)

    • window上有三個(gè)方法
    • scroll(x,y)在x軸、y軸上滾動(dòng)的位置,scrollTo(x,y) 
      讓滾動(dòng)條滾動(dòng)到當(dāng)前位置,而不是累加距離(這兩種方法是完全一樣的)
    • scrollBy();累加滾動(dòng)距離
    • 三個(gè)方法功能類(lèi)似,用法都是將x,y坐標(biāo)傳入。即實(shí)現(xiàn)讓滾動(dòng)條滾動(dòng)到當(dāng)前位置。
    • 區(qū)別:scrollBy()會(huì)在之前的數(shù)據(jù)基礎(chǔ)之上做累加。
    • eg:利用scroll()頁(yè)面定位功能。
    • eg:利用scrollBy()快速閱讀功能。

練習(xí): 
做一個(gè)小閱讀器,會(huì)自動(dòng)翻頁(yè)。

<!DOCTYPE html> <html> <head> <title>Document</title> </head> <body> 文本內(nèi)容 <div style="width:100px;height:100px;background-color:orange;color:#fff;font-size:40px;text-align:center;line-height:100px;position:fixed;bottom:200px;right:50px;opcity:0.5;">start</div> <div style="width:100px;height:100px;background-color:orange;color:green;font-size:40px;text-align:center;line-height:100px;position:fixed;bottom:50px;right:50px;opcity:0.5;">stop</div> </body> <script type="text/javascript"> var start = document.getElement.getElementsByTagName('div')[0]; var stop = document.getElement.getElementsByTagName('div')[1]; var timer = 0; var key = true; //加鎖,防止連續(xù)點(diǎn)start產(chǎn)生累加加速 start.onclick = function() { if(key) {
            timer = setInterval(function() { window.scollBy(0,10);
            },100);
            key = false;
        }
    }
    stop.onclick = function() { clearInterval(timer);
        key = true;
    } </script>
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

分享本文至:

日歷

鏈接

個(gè)人資料

存檔