從零開始學 Web 之 BOM（四）client系列

時間 2019-11-17

標籤開始 web bom client 系列欄目 HTML 简体版

原文原文鏈接

你們好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新......javascript

github：https://github.com/Daotin/Web

微信公衆號：Web前端之巔

博客園：http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的冒險之旅吧！html

1、client 系列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #dv {
            width: 300px;
            height: 200px;
            border: 20px solid purple;
            margin-top: 50px;
            margin-left: 100px;
        }
        #dv2 {
            width: 100px;
            height: 50px;
            border: 15px solid #e88e1d;
            margin-top: 20px;
            margin-left: 30px;
        }
    </style>
</head>
<body>
<div id="dv">
    <div id="dv2"></div>
</div>
<script src="common.js"></script>
<script>
    console.log(my$("dv").clientWidth); // 300
    console.log(my$("dv").clientHeight); // 200
    console.log(my$("dv").clientLeft); // 20
    console.log(my$("dv").clientTop); // 20

    console.log(my$("dv2").clientWidth); // 100
    console.log(my$("dv2").clientHeight); // 50
    console.log(my$("dv2").clientLeft); // 15
    console.log(my$("dv2").clientTop); // 15
</script>
</body>
</html>

clientWidth：可視區域的寬度（不含邊框）前端

clientHeight：可視區域的高度（不含邊框）java

clientLeft：左邊框的寬度git

clientTop：上邊框的寬度github

clientX：可視區域的橫座標瀏覽器

clientY：可視區域的縱座標微信

一、案例：圖片跟着鼠標移動最終版

以前圖片跟着鼠標移動的案例有些bug，就是IE8不支持。函數

在IE8 下沒有事件參數，可是有 window.event 能夠代替。學習

window.event：谷歌， IE8 支持，可是火狐不支持。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img {
            position: absolute;
        }
    </style>
</head>
<body>
<img src="images/Daotin.png" id="im">
<script src="common.js"></script>
<script>
    document.onmousemove = function (e) {
        // 獲取鼠標的橫縱座標
        e = window.event || e;
        my$("im").style.left = e.clientX + "px";
        my$("im").style.top = e.clientY + "px";

        console.log(window.event);
    }
</script>
</body>
</html>

這個時候，若是 body 的高度/寬度變化了，能夠滾動滑輪了會怎樣呢？

body {
    height: 5000px;
}

這時候，若是鼠標不動，只滾動滑輪的話，會發現圖片會距離鼠標原點愈來愈遠。爲何呢？

由於當咱們滾動滑輪的時候，鼠標距離頁面頂部的距離改變了，可是 clientY 是可視區域的大小，滾動滑輪的時候， clientY 的大小是沒有變的，可是鼠標距離頁面頂部的距離改變了，而圖片在 Y 軸的距離計算仍是按照 clientY 計算的，因此圖片就會距離鼠標愈來愈遠。

那麼，怎麼辦呢？

事件參數 e 有連個屬性：pageX,pageY 是距離頁面頂部邊界的距離，能夠直接使用，可是不幸的是，IE8 又不支持。看來，只能是鼠標移動的距離 + 滑輪捲曲出去的距離來實現了。

思路：

以前咱們封裝的兼容代碼都在一個函數裏面，這裏咱們封裝到一個對象 evt 裏面。

這個 evt 對象封裝了全部瀏覽器都支持的關於 clientX,clientY 等頁面座標的函數。

圖片跟着鼠標移動的最終版：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            height: 5000px;
        }

        img {
            position: absolute;
        }
    </style>
</head>
<body>
<img src="images/Daotin.png" id="im">
<script src="common.js"></script>
<script>
    var evt = {
        // 獲取通用事件對象
        getEvent: function (e) {
            return window.event||e;
        },
        // 獲取通用ClientX
        getClientX: function (e) {
            return this.getEvent(e).clientX;
        },
        // 獲取通用ClientY
        getClientY: function (e) {
            return this.getEvent(e).clientY;
        },
        // 獲取通用 scrollLeft
        getScrollLeft: function () {
            return window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
        },

        // 獲取通用 scrollTop
        getScrollTop: function () {
            return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
        },

        // 獲取通用 pageX
        getPageX: function (e) {
            return this.getEvent(e).pageX?this.getEvent(e).pageX:this.getClientX(e)+this.getScrollLeft();
        },

        // 獲取通用 pageY
        getPageY: function (e) {
            return this.getEvent(e).pageY?this.getEvent(e).pageY:this.getClientY(e)+this.getScrollTop();
        }
    };

    document.onmousemove = function (e) {
        my$("im").style.left = evt.getPageX(e) + "px";
        my$("im").style.top = evt.getPageY(e) + "px";
    }
</script>
</body>
</html>

二、案例：淘寶寶貝放大鏡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /*#box {*/
        /*width: 100%;*/
        /*height: 100%;*/
        /*background-color: lightpink;*/
        /*}*/
        .small {
            float: left;
            width: 384px;
            height: 240px;
            margin-top: 50px;
            margin-left: 50px;
        }

        .mask {
            width: 128px;
            height: 80px;
            background-color: yellow;
            opacity: 0.4;
            position: absolute;
            margin-top: 50px;
            margin-left: 50px;
            left: 0;
            top: 0;
            cursor: move;
            display: none;
        }

        .big {
            width: 640px;
            height: 400px;
            float: left;
            margin-left: 50px;
            overflow: hidden;
            display: none;
        }

    </style>
</head>
<body>
<div id="box">
    <div class="small">
        <img src="images/dos.jpg" alt="">
        <div class="mask"></div>
    </div>
    <div class="big">
        <img src="images/window.jpg" alt="">
    </div>
</div>
<script src="common.js"></script>
<script>
    // 獲取全部須要的元素
    var boxObj = my$("box");

    // 獲取 small
    var smallObj = boxObj.children[0];

    // 獲取 mask
    var maskObj = smallObj.children[1];

    // 獲取 big
    var bigObj = boxObj.children[1];

    // 獲取 bigImg
    var bigImgObj = bigObj.children[0];

    // 鼠標進入，顯示遮擋層和大圖
    smallObj.onmouseover = function () {
        maskObj.style.display = "block";
        bigObj.style.display = "block";
    };

    // 鼠標退出，隱藏遮擋層和大圖
    smallObj.onmouseout = function () {
        maskObj.style.display = "none";
        bigObj.style.display = "none";
    };

    // 遮擋層跟着鼠標移動，使鼠標位於遮擋層中央
    smallObj.onmousemove = function (e) {
        var x = evt.getClientX(e) - parseInt(maskObj.offsetWidth / 2)-50; // 這50是遮擋層初始偏移left的距離
        var y = evt.getClientY(e) - parseInt(maskObj.offsetHeight / 2)-50;// 這50是遮擋層初始偏移top的距離
        // 遮擋層的最小移動範圍
        x = x < 0 ? 0 : x;
        y = y < 0 ? 0 : y;
        // 遮擋層的最大移動範圍
        x = x > smallObj.offsetWidth - maskObj.offsetWidth
            ? smallObj.offsetWidth - maskObj.offsetWidth
            : x;
        y = y > smallObj.offsetHeight - maskObj.offsetHeight
            ? smallObj.offsetHeight - maskObj.offsetHeight
            : y;

        maskObj.style.left = x + "px";
        maskObj.style.top = y + "px";

        // 小圖移動的距離/小圖能移動的最大距離 == 大圖移動的距離/大圖能移動的最大距離
        // 大圖移動的距離 = 小圖移動的距離 * 大圖能移動的最大距離 / 小圖能移動的最大距離；
        var bigImgX = x * (bigImgObj.offsetWidth - bigObj.offsetWidth) / (smallObj.offsetWidth - maskObj.offsetWidth);
        var bigImgY = y * (bigImgObj.offsetHeight - bigObj.offsetHeight) / (smallObj.offsetHeight - maskObj.offsetHeight);

        bigImgObj.style.marginLeft = -bigImgX + "px";
        bigImgObj.style.marginTop = -bigImgY + "px";
    };
</script>
</body>
</html>

第一步：獲取全部須要的元素對象。

第二步：鼠標進入，離開小圖，顯示和隱藏遮擋層和大圖。

第三步：遮擋層隨着鼠標的移動而移動。

第四步：遮擋層移動的最大範圍在小圖內。

第五步：小圖移動的距離/小圖能移動的最大距離 == 大圖移動的距離/大圖能移動的最大距離，由此算出大圖移動的距離 = 小圖移動的距離 * 大圖能移動的最大距離 / 小圖能移動的最大距離。

第六步：將獲得的大圖移動的距離的負值賦值給大圖便可。

三、案例：DIY 滑動欄

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 200px;
            height: 300px;
            border: 1px solid red;
            margin-top: 100px;
            margin-left: 300px;
            overflow: hidden;
        }

        .content {
            float: left;
            width: 180px;
            /*height: 900px;*/
        }

        .right {
            float: left;
            width: 20px;
            height: 300px;
            background-color: #e7e7e7;
            position: relative;
        }

        .bar {
            position: absolute;
            left: 0;
            top: 0;
            width: 12px;
            height: 50px;
            margin: 0 4px;
            background-color: #7b7b7b;
            /*cursor: pointer;*/
        }
    </style>
</head>
<body>
<div id="box">
    <div class="content">
        kkkkkk舒適提示：因爲廠商可能在未提早通知的狀況下更改產品包裝、產地、贈品或隨機附件等。
        飛虎回覆僅在回覆當時對提問者有效，其餘網友僅供參考！若由此給您帶來不便敬請諒解，謝謝！
        舒適提示：因爲廠商可能在未提早通知的狀況下更改產品包裝、產地、贈品或隨機附件等。
        飛虎回覆僅在回覆當時對提問者有效，其餘網友僅供參考！若由此給您帶來不便敬請諒解，謝謝！
        舒適提示：因爲廠商可能在未提早通知的狀況下更改產品包裝、產地、贈品或隨機附件等。
        飛虎回覆僅在回覆當時對提問者有效，其餘網友僅供參考！若由此給您帶來不便敬請諒解，謝謝！
        舒適提示：因爲廠商可能在未提早通知的狀況下更改產品包裝、產地、贈品或隨機附件等。
        飛虎回覆僅在回覆當時對提問者有效，其餘網友僅供參考！若由此給您帶來不便敬請諒解，謝謝！
        舒適提示：因爲廠商可能在未提早通知的狀況下更改產品包裝、產地、贈品或隨機附件等。
        飛虎回覆僅在回覆當時對提問者有效，其餘網友僅供參考！若由此給您帶來不便敬請諒解，謝謝！
        舒適提示：因爲廠商可能在未提早通知的狀況下更改產品包裝、產地、贈品或隨機附件等。
        飛虎回覆僅在回覆當時對提問者有效，其餘網友僅供參考！若由此給您帶來不便敬請諒解，謝謝！
        舒適提示：因爲廠商可能在未提早通知的狀況下更改產品包裝、產地、贈品或隨機附件等。
        飛虎回覆僅在回覆當時對提問者有效，其餘網友僅供參考！若由此給您帶來不便敬請諒解，謝謝！
        舒適提示：因爲廠商可能在未提早通知的狀況下更改產品包裝、產地、贈品或隨機附件等。
        飛虎回覆僅在回覆當時對提問者有效，其餘網友僅供參考！若由此給您帶來不便敬請諒解，謝謝！Daotin
    </div>
    <div class="right">
        <div class="bar"></div>
    </div>
</div>
<script src="common.js"></script>
<script>
    // 獲取全部的元素
    // 獲取 box
    var boxObj = my$("box");

    // 獲取 content
    var conObj = boxObj.children[0];

    // 獲取 right box
    var rightObj = boxObj.children[1];

    // 獲取 bar
    var barObj = rightObj.children[0];

    // 鼠標點擊bar，拖動
    barObj.onmousedown = function (e) {
        var spaceY = evt.getClientY(e) - barObj.offsetTop; // 鼠標距離bar頂部的距離

        document.onmousemove = function () {
            var y = evt.getClientY(e) - spaceY;
            y = y < 0 ? 0 : y;
            y = y < rightObj.offsetHeight - barObj.offsetHeight ? y : rightObj.offsetHeight - barObj.offsetHeight;
            barObj.style.top = y + "px";

            // 防止滑動的時候選中了文字
            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

            // 鼠標移動的時候，content也應該移動
            // bar移動的距離/ bar能夠移動的最大距離 = content移動的距離/ content能夠移動的最大距離
            var contentY = y * (conObj.offsetHeight - boxObj.offsetHeight) / (rightObj.offsetHeight - barObj.offsetHeight);
            conObj.style.marginTop = -contentY + "px";
        };
    };

    document.onmouseup = function () {
        document.onmousemove = null;
    }

    // 鼠標離開
</script>
</body>
</html>

一、獲取全部須要的元素。

二、鼠標點擊，滑動，擡起，三個事件。

三、鼠標點擊的時候獲取鼠標的位置。

四、鼠標滑動的時候計算座標 y。因爲要保證鼠標移動的時候，鼠標相對滑動條頂部的距離必定，因此須要 spaceY。還須要注意滑動條滑動的範圍。

五、鼠標擡起的時候，清除鼠標移動的事件。

六、防止滑動的時候選中了文字 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

七、經過比例，計算 content 內容反方向移動的距離。

2、複習

一、元素隱藏的不一樣方式

my$("dv").style.display = "none"; // 不佔位
my$("dv").style.visibility = "hidden"; // 佔位
my$("dv").style.opacity = 0;  // 佔位
my$("dv").style.height = 0; // 佔位