欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript實(shí)現(xiàn)三種常用網(wǎng)頁特效(offset、client、scroll系列)

 更新時(shí)間：2021年12月22日 11:06:39   作者：bear*6  
這篇文章主要為大家介紹了三種常用的PC端網(wǎng)頁特效：元素偏移量offset系列，元素可視區(qū)client系列和元素滾動(dòng)scroll系列，文中示例代碼介紹詳細(xì)，需要的可以參考一下

一、元素偏移量 offset 系列

offset 翻譯過來就是偏移量， 我們使用 offset 系列相關(guān)屬性可以動(dòng)態(tài)的得到該元素的位置（偏移）、大小等。

  • 獲得元素距離帶有定位父元素的位置
  • 獲得元素自身的大?。▽挾雀叨龋?/li>
  • 注意： 返回的數(shù)值都不帶單位

offset常用的屬性有：

例如：給定一個(gè)子盒子和一個(gè)父盒子，并給他們一定的大小，來看看這些屬性是怎樣獲得的：

    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .father{
            position: relative;
            margin-left: 50px;
            margin-top: 10px;
            width: 200px;
            height: 200px;
            background-color: brown;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: cornflowerblue;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        var father = document.querySelector('.father');
        var son = document.querySelector('.son')
        console.log('father.offsetLeft',father.offsetLeft);
        console.log('father.offsetTop',father.offsetTop);
        console.log('son.offsetWidth',son.offsetWidth);
        console.log('son.offsetHeight',son.offsetHeight);
    </script>
</body>

打印結(jié)果為：

我們知道，offset可以幫助我們得到元素的大小和父元素，但是style屬性也可以獲取到相關(guān)屬性，那么，他們的區(qū)別又是什么呢？

offset

  • offset 可以得到任意樣式表中的樣式值
  • offset 系列獲得的數(shù)值是沒有單位的
  • offsetWidth 包含padding+border+width
  • offsetWidth 等屬性是只讀屬性，只能獲取不能賦值

style

  • style.width 獲得的是帶有單位的字符串
  • style.width 獲得不包含padding和border 的值
  • style.width 是可讀寫屬性，可以獲取也可以賦值

二、元素可視區(qū) client 系列

client 翻譯過來就是客戶端，我們使用 client 系列的相關(guān)屬性來獲取元素可視區(qū)的相關(guān)信息。通過 client 系列的相關(guān)屬性可以動(dòng)態(tài)的得到該元素的邊框大小、元素大小等。

例如，給定一個(gè)帶邊框的盒子，返回這些屬性，看看結(jié)果。

<style>
        .box{
            width: 200px;
            height: 200px;
            background-color: darkorchid;
            border: 20px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
<script>
    var box = document.querySelector('.box')
    console.log('box.clientWidth:'+box.clientWidth);
    console.log('box.clientWidth:'+box.clientWidth);
    console.log('box.clientWidth:'+box.clientWidth);
    console.log('box.clientTop:'+box.clientTop);
</script>

結(jié)果為：

可以發(fā)現(xiàn)，通過client系列的得到的盒子大小并不包含盒子的邊框。

三、元素滾動(dòng) scroll 系列

scroll 翻譯過來就是滾動(dòng)的，我們使用 scroll 系列的相關(guān)屬性可以動(dòng)態(tài)的得到該元素的大小、滾動(dòng)距離等。

例如：還是上面案例的盒子，我們打印其scroll系列屬性，看看結(jié)果

 <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: darkorchid;
            border: 20px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
<script>
    var box = document.querySelector('.box')
    console.log('box.scrollWidth:'+box.scrollWidth);
    console.log('box.scrollHeight:'+box.scrollHeight);
    console.log('box.scrollLeft:'+box.scrollLeft);
    console.log('box.scrollTop:'+box.scrollTop);
</script>

結(jié)果為：

我們發(fā)現(xiàn)得到的盒子高度和寬度都是我們的給定值，和client系列得到的值是一樣的，那么他們的區(qū)別是什么呢？現(xiàn)在我們給盒子里面添加超過盒子高度的內(nèi)容：

 <div class="box">
   王歡在學(xué)前端<br><br>
   王歡在學(xué)前端<br><br>
   王歡在學(xué)前端<br><br>
   王歡在學(xué)前端<br><br>
   王歡在學(xué)前端<br><br>
   王歡在學(xué)前端<br><br>
   王歡在學(xué)前端
</div>

打印結(jié)果為：

可以發(fā)現(xiàn)此時(shí)打印的盒子高度變大了，其實(shí)這個(gè)值是指盒子加上文字后自身實(shí)際的高度。

大家還會(huì)發(fā)現(xiàn)兩次打印的box.scrollLeft和box.scrollTop的值都是0，這又是什么意思呢？

現(xiàn)在我們通過overflow:auto將盒子內(nèi)超出的內(nèi)容讓其以滾動(dòng)條的形式顯示，然后給他添加滾動(dòng)事件，如下所示：

 var box = document.querySelector('.box')
    box.addEventListener('scroll',function(){
        console.log('box.scrollTop:'+box.scrollTop);
    })

效果為;

發(fā)現(xiàn)得到的值是隨著滾動(dòng)來變化的，其實(shí)，box.scrollTop返回的是被卷去的上側(cè)距離，如下圖所示：

以上就是JavaScript實(shí)現(xiàn)三種常用網(wǎng)頁特效(offset、client、scroll系列)的詳細(xì)內(nèi)容，更多關(guān)于JavaScript網(wǎng)頁特效的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論