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

JavaScript三種常用網(wǎng)頁特效詳解

 更新時間:2021年12月11日 15:35:14   作者:橘貓吃不胖~  
這篇文章主要介紹了可以用JavaScript實現(xiàn)的常用的三種網(wǎng)頁特效:offset系列、client系列、scroll系列。文中示例代碼簡潔易懂,感興趣的小伙伴可以了解一下

1 元素偏移量offset系列

1.1 offset概述

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

屬性 說明
offsetLeft 返回元素相對其帶有定位的父元素左邊框的偏移
offsetTop 返回元素相對其帶有定位的元素上方的偏移父
offsetWidth 返回自身的寬度(包括padding、邊框和內(nèi)容區(qū)域的寬度)。注意返回數(shù)值不帶單位
offsetHeight 返回自身的高度(包括padding、邊框和內(nèi)容區(qū)域的高度)。注意返回數(shù)值不帶單位
offsetParent 返回作為該元素帶有定位元素的父級元素(如果父級都沒有定位則返回body)

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

示例:寫一個盒子,在終端輸出這個盒子的寬度和高度,獲取并輸出鼠標指針在盒子內(nèi)的坐標

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

鼠標每在盒子中移動一點,終端就會輸出相應(yīng)的坐標。

1.2 offset與style的區(qū)別

offset style
offset可以得到任意樣式表中的樣式值 style只能得到行內(nèi)樣式表中的樣式值
offset系列獲得的數(shù)值是沒有單位的 style.width獲得的是帶有單位的字符串
offsetWidth包含padding、border、width的值 style.width獲得的是不包含padding、border的值
offsetWidth等屬性是只讀屬性,只能獲取不能賦值 style.width是可讀寫屬性,可以獲取也可以賦值

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

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

屬性 說明
clientLeft 返回元素左邊框的大小
clientTop 返回元素上邊框的大小
clientWidth 返回自身的寬度(包含padding),內(nèi)容區(qū)域的寬度(不含邊框)。注意返回數(shù)值不帶單位
clientHeight 返回自身的高度(包含padding),內(nèi)容區(qū)域的高度(不含邊框)。注意返回數(shù)值不帶單位

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

    <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("上邊框的大?。?, div.clientTop);
        //輸出元素自身寬度和高度(不含邊框)
        console.log("寬度為:", div.clientWidth);
        console.log("高度為:", div.clientHeight);
    </script>

3 元素滾動scroll系列

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

屬性 說明
scrollLeft 返回被卷去的左側(cè)距離,返回數(shù)值不帶單位
scrollTop 返回被卷去的上方距離,返回數(shù)值不帶單位
scrollWidth 返回自身的寬度,不含邊框。注意返回數(shù)值不帶單位
scrollHeight 返回自身的高度,不含邊框。注意返回數(shù)值不帶單位

示例:獲取自身的高度和寬度,獲取div卷起來的高度

    <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>點擊獲取卷起來的高度和寬度</button>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* 將放不下的元素滾動來顯示 */
            overflow: scroll;
        }
    </style>
    <script>
        //1、獲取頁面中的元素div和button
        let div = document.querySelector("div");
        let button = document.querySelector("button");
        //2、輸出自身的高度和寬度
        console.log("高度為:", div.scrollHeight);
        console.log("寬度為:", div.scrollWidth);
        //給按鈕注冊click點擊事件,點擊之后輸出卷起來的高和寬
        button.addEventListener("click", function () {
            console.log("卷起來的高度:", div.scrollTop);
            console.log("卷起來的寬度:", div.scrollLeft);
        })
    </script>

到此這篇關(guān)于JavaScript三種常用網(wǎng)頁特效詳解的文章就介紹到這了,更多相關(guān)JavaScript網(wǎng)頁特效內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評論