JavaScript常用網(wǎng)頁(yè)特效有哪些

小編給大家分享一下JavaScript常用網(wǎng)頁(yè)特效有哪些，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

1 元素偏移量offset系列

1.1 offset概述

offset含義：offset的含義是偏移量，使用offset的相關(guān)屬性可以動(dòng)態(tài)地獲取該元素的位置、大小等。

獲取鼠標(biāo)位置：鼠標(biāo)指針在盒子內(nèi)的坐標(biāo)位置示意圖分析。

示例：寫(xiě)一個(gè)盒子，在終端輸出這個(gè)盒子的寬度和高度，獲取并輸出鼠標(biāo)指針在盒子內(nèi)的坐標(biāo)

<div id="box"></div>
    <script>
        var box = document.querySelector('#box');
        //1.輸出box的寬度和高度
        console.log("寬度：", box.offsetWidth);
        console.log("高度：", box.offsetHeight);
        //2.給box綁定鼠標(biāo)移動(dòng)的事件
        box.addEventListener('mousemove', function (e) {
            //2.1 獲取box的偏移量
            var left = box.offsetLeft;
            var top = box.offsetTop;
            console.log("偏移量：(" + left + "," + top + ")");
            //2.2 計(jì)算鼠標(biāo)指針在box中的坐標(biāo)
            var x = e.pageX - left;
            var y = e.pageY - top;
            console.log("x軸坐標(biāo)：" + x + ",y軸坐標(biāo)：" + y);
        })
    </script>

鼠標(biāo)每在盒子中移動(dòng)一點(diǎn)，終端就會(huì)輸出相應(yīng)的坐標(biāo)。

1.2 offset與style的區(qū)別

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

client系列：client中文意思是客戶端，通過(guò)使用client系列的相關(guān)屬性可以獲取元素可視區(qū)的相關(guān)信息。

示例：輸出元素上、左邊框的大小，以及自身的寬度和高度

<div></div>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: aqua;
            border: 3px solid yellow;
        }
    </style>
    <script>
        //獲取div元素
        let div = document.querySelector("div");
        //輸出元素左邊框和上邊框的大小
        console.log("左邊框的大小：", div.clientLeft);
        console.log("上邊框的大?。?quot;, div.clientTop);
        //輸出元素自身寬度和高度（不含邊框）
        console.log("寬度為：", div.clientWidth);
        console.log("高度為：", div.clientHeight);
    </script>

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

scroll含義：scroll的含義是滾動(dòng)，使用scroll系列的相關(guān)屬性可以動(dòng)態(tài)地獲取該元素的滾動(dòng)距離、大小等。

示例：獲取自身的高度和寬度，獲取div卷起來(lái)的高度

<div>
        我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容
    </div><br>
    <button>點(diǎn)擊獲取卷起來(lái)的高度和寬度</button>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* 將放不下的元素滾動(dòng)來(lái)顯示 */
            overflow: scroll;
        }
    </style>
    <script>
        //1、獲取頁(yè)面中的元素div和button
        let div = document.querySelector("div");
        let button = document.querySelector("button");
        //2、輸出自身的高度和寬度
        console.log("高度為：", div.scrollHeight);
        console.log("寬度為：", div.scrollWidth);
        //給按鈕注冊(cè)click點(diǎn)擊事件，點(diǎn)擊之后輸出卷起來(lái)的高和寬
        button.addEventListener("click", function () {
            console.log("卷起來(lái)的高度：", div.scrollTop);
            console.log("卷起來(lái)的寬度：", div.scrollLeft);
        })
    </script>

看完了這篇文章，相信你對(duì)“JavaScript常用網(wǎng)頁(yè)特效有哪些”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！