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

阿新 • • 發佈：2019-01-15

一、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：可視區域的高度（不含邊框）

clientLeft：左邊框的寬度

clientTop：上邊框的寬度

clientX：可視區域的橫座標

clientY：可視區域的縱座標

1、案例：圖片跟著滑鼠移動最終版

之前圖片跟著滑鼠移動的案例有些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>

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

<!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>

第一步：獲取所有需要的元素物件。

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

第三步：遮擋層隨著滑鼠的移動而移動。

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

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

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

3、案例：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>

1、獲取所有需要的元素。

2、滑鼠點選，滑動，擡起，三個事件。

3、滑鼠點選的時候獲取滑鼠的位置。

4、滑鼠滑動的時候計算座標 y。由於要保證滑鼠移動的時候，滑鼠相對滑動條頂部的距離一定，所以需要 spaceY。還需要注意滑動條滑動的範圍。

5、滑鼠擡起的時候，清除滑鼠移動的事件。

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

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

二、複習

1、元素隱藏的不同方式

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

Web前端之巔

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

一、client 系列 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style

從零開始學 Web 之 BOM（三）offset，scroll，變速動畫函數

樣式清理 java mar dde sof mov har width 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔博客園：

從零開始學 Web 之 BOM（三）offset，scroll，變速動畫函式

一、直接使用 document 獲取的元素 // 獲取 body document.body; // 獲取 title document.title; // 獲取的是 title 中的值 // 獲取 html document.documentElement; 1、案例：圖片跟著滑鼠移動 <!DOC

從零開始學 Web 之 BOM（二）定時器

一、定時器 BOM 中有兩中方式設定定時器。 1、方式一特點：定時器可以重複使用。 // 引數有兩個： // 第一個引數：定時器定時結束處理函式 // 第二個引數：定時事件，單位毫秒。 // 返回值：定時器id值 var timeId = window.setInterval(function()

從零開始學 Web 之 BOM（一）BOM的概念，一些BOM物件

大家好，這裡是「從零開始學 Web 系列教程」，並在下列地址同步更新...... +------------------------------------------------------------ github：https://github.com/Daotin/Web 微信公眾號：Web前端之

從零開始學 Web 之 DOM（四）節點

def clas scrip while p標簽設置 ner 操作 text 大家好，這裏是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關註。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相

從零開始學 Web 之 ES6（四）ES6基礎語法二

一、Promise Promise是一個物件，代表了未來某個將要發生的事件(，這個事件通常是一個非同步操作) 有了Promise物件, 可以將非同步操作以同步的流程表達出來, 避免了層層巢狀的回撥函式(俗稱'回撥地獄')。 ES6的Promise是一個建構函式, 用來生成promise例項。 1、prom

從零開始學 Web 之 JavaScript（四）陣列

大家好，這裡是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！一、陣列 1、陣列

從零開始學 Web 之 Ajax（四）介面文件，驗證使用者名稱唯一性案例

>大家好，這裡是「從零開始學 Web 系列教程」，並在下列地址同步更新...... > > - github：https://github.com/Daotin/Web > - 微信公眾號：[Web前端之巔](https://github.com/Daotin/pi

從零開始學 Web 之 HTML5（四）拖拽介面，Web儲存，自定義播放器

從零開始學 Web 之 CSS（四）CSS初始化、定位、overflow、標籤規範

大家好，這裡是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！一、CSS初始化

從零開始學 Web 之 jQuery（四）元素的建立新增與刪除，自定義屬性

一、元素的建立新增和刪除 1、方式一：以物件的方式建立元素 append，appendTo ：在被選元素所有子元素的結尾插入內容（增加子元素）。 prepend，prependTo：在被選元素所有子元素的開頭插入元素（增加子元素）。 before：在當前被選元素之後插入內容（相當於增加兄弟元素）。 af

從零開始學 Web 之 CSS3（四）邊框圖片，過渡

一、邊框圖片邊框圖片：就是給邊框加圖片背景。我們之前加的邊框都是純顏色的邊框，那麼我們怎麼給邊框加圖片呢？原理：把一張圖片分成九宮格的形式，然後一一對應到需要新增邊框的元素上。並且，新增邊框圖片是以背景的方式新增的，所以會有可能文字覆蓋在邊框的情況，後面也會介紹處理方法。語法： /* bord

從零開始學 Web 之 DOM（一）DOM的概念，對標簽操作

關註 1.5 pan 什麽 tin p標簽 nod text == 大家好，這裏是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關註。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，

從零開始學 Web 之 jQuery（二）獲取和操作元素的屬性

eight images idt 隱藏 lis 屬性 ner master lin 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔

從零開始學 Web 之 jQuery（六）為元素綁定多個相同事件，解綁事件

png 好用添加方式執行存在區別也會地址大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔博客園：http://ww

從零開始學 Web 之 jQuery（七）事件冒泡，事件參數對象，鏈式編程原理

eval uri turn 定位 return 也會否則 ont sele 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔博客

從零開始學 Web 之 Ajax（三）Ajax 概述，快速上手

lan 技術分享 php 概述由於 val asc logs 更新大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔博客園：ht

從零開始學 Web 之 Ajax（五）同步異步請求，數據格式

遊記 document 空閑 name center 20px 實現 resp 也會大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之

從零開始學 Web 之 Ajax（六）jQuery中的Ajax

var 技術分享 else parse cnblogs 我會 clas alt jquer 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web

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

一、client 系列

1、案例：圖片跟著滑鼠移動最終版

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

3、案例：DIY 滑動欄

二、複習

1、元素隱藏的不同方式

相關推薦