JavaScript十 - 元素(PC網(wǎng)頁特效)

13.1 元素偏移量offset系列

13.1.1 offset 概述

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

獲得元素距離帶有定位父元素的位置
獲得元素自身的大小（寬度高度）
注意：返回的數(shù)值都不帶單位

圖片1.png

圖片2.png

代碼演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .father {
            /* position: relative; */
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 150px;
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: purple;
            margin-left: 45px;
        }
        .w {
            height: 200px;
            background-color: skyblue;
            margin: 0 auto 200px;
            padding: 10px;
            border: 15px solid red;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <div class="w"></div>
    <script>
        // offset 系列
        var father = document.querySelector('.father');
        var son = document.querySelector('.son');
        // 1.可以得到元素的偏移 位置 返回的不帶單位的數(shù)值  
        console.log(father.offsetTop);
        console.log(father.offsetLeft);
        // 它以帶有定位的父親為準(zhǔn)  如果么有父親或者父親沒有定位 則以 body 為準(zhǔn)
        console.log(son.offsetLeft);
        var w = document.querySelector('.w');
        // 2.可以得到元素的大小 寬度和高度 是包含padding + border + width 
        console.log(w.offsetWidth);
        console.log(w.offsetHeight);
        // 3. 返回帶有定位的父親 否則返回的是body
        console.log(son.offsetParent); // 返回帶有定位的父親 否則返回的是body
        console.log(son.parentNode); // 返回父親 是最近一級的父親 親爸爸 不管父親有沒有定位
    </script>
</body>
</html>

13.1.2 offset 與 style 區(qū)別

offset：

offset 可以得到任意樣式表中的樣式值
offset 系列獲得的數(shù)值是沒有單位的
offsetWidth 包含padding+border+width
offsetWidth 等屬性是只讀屬性宦芦，只能獲取不能賦值
所以宙址，我們想要獲取元素大小位置，用offset更合適

style：

style 只能得到行內(nèi)樣式表中的樣式值
style.width 獲得的是帶有單位的字符串
style.width 獲得不包含padding和border 的值
style.width 是可讀寫屬性踪旷，可以獲取也可以賦值
所以曼氛，我們想要給元素更改值，則需要用style改變

因為平時我們都是給元素注冊觸摸事件令野，所以重點記住 targetTocuhes

代碼演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="box" style="width: 200px;"></div>
    <script>
        // offset與style的區(qū)別
        var box = document.querySelector('.box');
        console.log(box.offsetWidth);
        console.log(box.style.width);
        // box.offsetWidth = '300px';
        box.style.width = '300px';
    </script>
</body>

</html>

13.1.3 案例講解-獲取鼠標(biāo)在盒子內(nèi)的坐標(biāo)

思路：

我們在盒子內(nèi)點擊舀患，想要得到鼠標(biāo)距離盒子左右的距離。
首先得到鼠標(biāo)在頁面中的坐標(biāo)（e.pageX, e.pageY）
其次得到盒子在頁面中的距離 ( box.offsetLeft, box.offsetTop)
用鼠標(biāo)距離頁面的坐標(biāo)減去盒子在頁面中的距離气破，得到鼠標(biāo)在盒子內(nèi)的坐標(biāo)
如果想要移動一下鼠標(biāo)聊浅，就要獲取最新的坐標(biāo)，使用鼠標(biāo)移動

代碼演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 200px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        // 我們在盒子內(nèi)點擊现使， 想要得到鼠標(biāo)距離盒子左右的距離低匙。
        // 首先得到鼠標(biāo)在頁面中的坐標(biāo)（ e.pageX, e.pageY）
        // 其次得到盒子在頁面中的距離(box.offsetLeft, box.offsetTop)
        // 用鼠標(biāo)距離頁面的坐標(biāo)減去盒子在頁面中的距離， 得到 鼠標(biāo)在盒子內(nèi)的坐標(biāo)
        var box = document.querySelector('.box');
        box.addEventListener('mousemove', function(e) {
            // console.log(e.pageX);
            // console.log(e.pageY);
            // console.log(box.offsetLeft);
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            this.innerHTML = 'x坐標(biāo)是' + x + ' y坐標(biāo)是' + y;
        })
    </script>
</body>
</html>

13.1.4 案例講解-模態(tài)框拖拽

彈出框碳锈，我們也稱為模態(tài)框

點擊彈出層顽冶，會彈出模態(tài)框，并且顯示灰色半透明的遮擋層
點擊關(guān)閉按鈕售碳，可以關(guān)閉模態(tài)框强重，并且同時關(guān)閉灰色半透明遮擋層
鼠標(biāo)放到模態(tài)框最上面一行，可以按住鼠標(biāo)拖拽模態(tài)框在頁面中移動
鼠標(biāo)松開贸人，可以停止拖動模態(tài)框移動

思路：

點擊彈出層间景，模態(tài)框和遮擋層就會顯示出來 display:block;
點擊關(guān)閉按鈕，模態(tài)框和遮擋層就會隱藏起來 display:none;
在頁面中拖拽的原理：鼠標(biāo)按下并且移動艺智，之后松開鼠標(biāo)
觸發(fā)事件是鼠標(biāo)按下mousedown倘要，鼠標(biāo)移動mousemove 鼠標(biāo)松開 mouseup
拖拽過程: 鼠標(biāo)移動過程中，獲得最新的值賦值給模態(tài)框的left和top值十拣，這樣模態(tài)框可以跟著鼠標(biāo)走了
鼠標(biāo)按下觸發(fā)的事件源是最上面一行封拧，就是 id 為 title
鼠標(biāo)的坐標(biāo)減去鼠標(biāo)在盒子內(nèi)的坐標(biāo)，才是模態(tài)框真正的位置夭问。
鼠標(biāo)按下哮缺，我們要得到鼠標(biāo)在盒子的坐標(biāo)。
鼠標(biāo)移動甲喝，就讓模態(tài)框的坐標(biāo) 設(shè)置為：鼠標(biāo)坐標(biāo) 減去盒子坐標(biāo)即可尝苇，注意移動事件寫到按下事件里面。
鼠標(biāo)松開埠胖，就停止拖拽糠溜，就是可以讓鼠標(biāo)移動事件解除

代碼演示：

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }
        .login-header {
            width: 100%;
            text-align: center;
            height: 30px;
            font-size: 24px;
            line-height: 30px;
        }
        .login {
            display: none;
            width: 512px;
            height: 280px;
            position: fixed;
            border: #ebebeb solid 1px;
            left: 50%;
            top: 50%;
            background: #ffffff;
            box-shadow: 0px 0px 20px #ddd;
            z-index: 9999;
            transform: translate(-50%, -50%);
        }
        .login-title {
            width: 100%;
            margin: 10px 0px 0px 0px;
            text-align: center;
            line-height: 40px;
            height: 40px;
            font-size: 18px;
            position: relative;
            cursor: move;
        }
        .login-input-content {
            margin-top: 20px;
        }
        .login-button {
            width: 50%;
            margin: 30px auto 0px auto;
            line-height: 40px;
            font-size: 14px;
            border: #ebebeb 1px solid;
            text-align: center;
        }
        .login-bg {
            display: none;
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0px;
            left: 0px;
            background: rgba(0, 0, 0, .3);
        }
        a {
            text-decoration: none;
            color: #000000;
        }
        .login-button a {
            display: block;
        }
        .login-input input.list-input {
            float: left;
            line-height: 35px;
            height: 35px;
            width: 350px;
            border: #ebebeb 1px solid;
            text-indent: 5px;
        }
        .login-input {
            overflow: hidden;
            margin: 0px 0px 20px 0px;
        }
        .login-input label {
            float: left;
            width: 90px;
            padding-right: 10px;
            text-align: right;
            line-height: 35px;
            height: 35px;
            font-size: 14px;
        }
        .login-title span {
            position: absolute;
            font-size: 12px;
            right: -20px;
            top: -30px;
            background: #ffffff;
            border: #ebebeb solid 1px;
            width: 40px;
            height: 40px;
            border-radius: 20px;
        }
    </style>
</head
<body>
    <div class="login-header"><a id="link" href="javascript:;">點擊，彈出登錄框</a></div>
    <div id="login" class="login">
        <div id="title" class="login-title">登錄會員
            <span><a id="closeBtn" href="javascript:void(0);" class="close-login">關(guān)閉</a></span>
        </div>
        <div class="login-input-content">
            <div class="login-input">
                <label>用戶名：</label>
                <input type="text" placeholder="請輸入用戶名" name="info[username]" id="username" class="list-input">
            </div>
            <div class="login-input">
                <label>登錄密碼：</label>
                <input type="password" placeholder="請輸入登錄密碼" name="info[password]" id="password" class="list-input">
            </div>
        </div>
        <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登錄會員</a></div>
    </div>
    <!-- 遮蓋層 -->
    <div id="bg" class="login-bg"></div>
    <script>
        // 1. 獲取元素
        var login = document.querySelector('.login');
        var mask = document.querySelector('.login-bg');
        var link = document.querySelector('#link');
        var closeBtn = document.querySelector('#closeBtn');
        var title = document.querySelector('#title');
        // 2. 點擊彈出層這個鏈接 link  讓mask 和login 顯示出來
        link.addEventListener('click', function() {
                mask.style.display = 'block';
                login.style.display = 'block';
            })
            // 3. 點擊 closeBtn 就隱藏 mask 和 login 
        closeBtn.addEventListener('click', function() {
                mask.style.display = 'none';
                login.style.display = 'none';
            })
            // 4. 開始拖拽
            // (1) 當(dāng)我們鼠標(biāo)按下直撤， 就獲得鼠標(biāo)在盒子內(nèi)的坐標(biāo)
        title.addEventListener('mousedown', function(e) {
            var x = e.pageX - login.offsetLeft;
            var y = e.pageY - login.offsetTop;
            // (2) 鼠標(biāo)移動的時候非竿，把鼠標(biāo)在頁面中的坐標(biāo)，減去 鼠標(biāo)在盒子內(nèi)的坐標(biāo)就是模態(tài)框的left和top值
            document.addEventListener('mousemove', move)
            function move(e) {
                login.style.left = e.pageX - x + 'px';
                login.style.top = e.pageY - y + 'px';
            }
            // (3) 鼠標(biāo)彈起谋竖，就讓鼠標(biāo)移動事件移除
            document.addEventListener('mouseup', function() {
                document.removeEventListener('mousemove', move);
            })
        })
    </script>
</body>
</html>

13.1.5 案例講解-仿京東放大鏡

思路：

黃色的遮擋層跟隨鼠標(biāo)功能。
把鼠標(biāo)坐標(biāo)給遮擋層不合適。因為遮擋層坐標(biāo)以父盒子為準(zhǔn)唇兑。
首先是獲得鼠標(biāo)在盒子的坐標(biāo)勇边。
之后把數(shù)值給遮擋層做為left 和top值。
此時用到鼠標(biāo)移動事件，但是還是在小圖片盒子內(nèi)移動。
發(fā)現(xiàn)，遮擋層位置不對袍暴，需要再減去盒子自身高度和寬度的一半。
遮擋層不能超出小圖片盒子范圍隶症。
如果小于零政模，就把坐標(biāo)設(shè)置為0
如果大于遮擋層最大的移動距離，就把坐標(biāo)設(shè)置為最大的移動距離
遮擋層的最大移動距離：小圖片盒子寬度減去遮擋層盒子寬度

案例目錄結(jié)構(gòu)：

放大鏡目錄結(jié)構(gòu).png

代碼演示：

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手機詳情頁蚂会！</title>
    <meta name="description" content="品優(yōu)購JD.COM-專業(yè)的綜合網(wǎng)上購物商城,銷售家電淋样、數(shù)碼通訊、電腦胁住、家居百貨习蓬、服裝服飾、母嬰措嵌、圖書躲叼、食品等數(shù)萬個品牌優(yōu)質(zhì)商品.便捷、誠信的服務(wù)企巢，為您提供愉悅的網(wǎng)上購物體驗!" />
    <meta name="Keywords" content="網(wǎng)上購物,網(wǎng)上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數(shù)碼,配件,手表,存儲卡,品優(yōu)購" />
    <!-- 引入facicon.ico網(wǎng)頁圖標(biāo) -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <!-- 引入css 初始化的css 文件 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入公共樣式的css 文件 -->
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入詳情頁面的css文件 -->
    <link rel="stylesheet" href="css/detail.css">
    <!-- 引入我們的js 文件 -->
    <script src="js/detail.js"></script>
</head>
<body>
    <!-- 頂部快捷導(dǎo)航start -->
    <div class="shortcut">
        <div class="w">
            <div class="fl">
                <ul>
                    <li>品優(yōu)購歡迎您枫慷！ </li>
                    <li>
                        <a href="#">請登錄</a>
                        <a href="#" class="style-red">免費注冊</a>
                    </li>
                </ul>
            </div>
            <div class="fr">
                <ul>
                    <li><a href="#">我的訂單</a></li>
                    <li class="spacer"></li>
                    <li>
                        <a href="#">我的品優(yōu)購</a>
                        <i class="icomoon">?</i>
                    </li>
                    <li class="spacer"></li>
                    <li><a href="#">品優(yōu)購會員</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">企業(yè)采購</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">關(guān)注品優(yōu)購</a> <i class="icomoon">?</i></li>
                    <li class="spacer"></li>
                    <li><a href="#">客戶服務(wù)</a> <i class="icomoon">?</i></li>
                    <li class="spacer"></li>
                    <li><a href="#">網(wǎng)站導(dǎo)航</a> <i class="icomoon">?</i></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 頂部快捷導(dǎo)航end  -->
    <!-- header制作 -->
    <div class="header w">
        <!-- logo -->
        <div class="logo">
            <h1>
                <a href="index.html" title="品優(yōu)購">品優(yōu)購</a>
            </h1>
        </div>
        <!-- search -->
        <div class="search">
            <input type="text" class="text" value="請搜索內(nèi)容...">
            <button class="btn">搜索</button>
        </div>
        <!-- hotwrods -->
        <div class="hotwrods">
            <a href="#" class="style-red">優(yōu)惠購首發(fā)</a>
            <a href="#">億元優(yōu)惠</a>
            <a href="#">9.9元團(tuán)購</a>
            <a href="#">美滿99減30</a>
            <a href="#">辦公用品</a>
            <a href="#">電腦</a>
            <a href="#">通信</a>
        </div>
        <div class="shopcar">
            <i class="car">? </i>我的購物車 <i class="arrow"> ? </i>
            <i class="count">80</i>
        </div>
    </div>
    <!-- header 結(jié)束 -->
    <!-- nav start -->
    <div class="nav">
        <div class="w">
            <div class="dropdown fl">
                <div class="dt"> 全部商品分類 </div>
                <div class="dd" style="display: none;">
                    <ul>
                        <li class="menu_item"><a href="#">家用電器</a> <i> ? </i> </li>
                        <li class="menu_item">
                            <a href="list.html">手機</a> 、
                            <a href="#">數(shù)碼</a> 浪规、
                            <a href="#">通信</a>
                            <i> ? </i>
                        </li>
                        <li class="menu_item"><a href="#">電腦或听、辦公</a> <i> ? </i> </li>
                        <li class="menu_item"><a href="#">家居、家具笋婿、家裝誉裆、廚具</a> <i> ? </i> </li>
                        <li class="menu_item"><a href="#">男裝、女裝缸濒、童裝足丢、內(nèi)衣</a> <i> ? </i> </li>
                        <li class="menu_item"><a href="#">個戶化妝、清潔用品庇配、寵物</a> <i> ? </i> </li>
                        <li class="menu_item"><a href="#">鞋靴斩跌、箱包、珠寶捞慌、奢侈品</a> <i> ? </i> </li>
                        <li class="menu_item"><a href="#">運動戶外耀鸦、鐘表</a> <i> ? </i> </li>
                        <li class="menu_item"><a href="#">汽車、汽車用品</a> <i> ? </i> </li>
                        <li class="menu_item"><a href="#">母嬰啸澡、玩具樂器</a> <i> ? </i> </li>
                        <li class="menu_item"><a href="#">食品袖订、酒類氮帐、生鮮、特產(chǎn)</a> <i> ? </i> </li>
                        <li class="menu_item"><a href="#">醫(yī)藥保健</a> <i> ? </i> </li>
                        <li class="menu_item"><a href="#">圖書洛姑、音像上沐、電子書</a> <i> ?</i> </li>
                        <li class="menu_item"><a href="#">彩票、旅行吏口、充值奄容、票務(wù)</a> <i> ?</i> </li>
                        <li class="menu_item"><a href="#">理財冰更、眾籌产徊、白條、保險</a> <i> ? </i> </li>
                    </ul>
                </div>
            </div>
            <!-- 右側(cè)導(dǎo)航 -->
            <div class="navitems fl">
                <ul>
                    <li><a href="#">服裝城</a></li>
                    <li><a href="#">美妝館</a></li>
                    <li><a href="#">傳智超市</a></li>
                    <li><a href="#">全球購</a></li>
                    <li><a href="#">閃購</a></li>
                    <li><a href="#">團(tuán)購</a></li>
                    <li><a href="#">拍賣</a></li>
                    <li><a href="#">有趣</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- nav end -->
    <!-- 詳情頁內(nèi)容部分     -->
    <div class="de_container w">
        <!-- 面包屑導(dǎo)航 -->
        <div class="crumb_wrap">
            <a href="#">手機蜀细、數(shù)碼舟铜、通訊</a> 〉 <a href="#">手機   </a> 〉 <a href="#">Apple蘋果   </a> 〉 <a href="#">iphone 6S Plus系類</a>
        </div>
        <!-- 產(chǎn)品介紹模塊 -->
        <div class="product_intro clearfix">
            <!-- 預(yù)覽區(qū)域 -->
            <div class="preview_wrap fl">
                <div class="preview_img">
                    <img src="upload/s3.png" alt="">
                    <div class="mask"></div>
                    <div class="big">
                        <img src="upload/big.jpg" alt="" class="bigImg">
                    </div>
                </div>
                <div class="preview_list">
                    <a href="#" class="arrow_prev"></a>
                    <a href="#" class="arrow_next"></a>
                    <ul class="list_item">
                        <li>
                            <img src="upload/pre.jpg" alt="">
                        </li>
                        <li class="current">
                            <img src="upload/pre.jpg" alt="">
                        </li>
                        <li>
                            <img src="upload/pre.jpg" alt="">
                        </li>
                        <li>
                            <img src="upload/pre.jpg" alt="">
                        </li>
                        <li>
                            <img src="upload/pre.jpg" alt="">
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 產(chǎn)品詳細(xì)信息 -->
            <div class="itemInfo_wrap fr">
                <div class="sku_name">
                    Apple iPhone 6s（A1700）64G玫瑰金色 移動通信電信4G手機
                </div>
                <div class="news">
                    推薦選擇下方[移動優(yōu)惠購],手機套餐齊搞定,不用換號,每月還有花費返
                </div>
                <div class="summary">
                    <dl class="summary_price">
                        <dt>價格</dt>
                        <dd>
                            <i class="price">￥5299.00 </i>
                            <a href="#">降價通知</a>
                            <div class="remark">累計評價612188</div>
                        </dd>
                    </dl>
                    <dl class="summary_promotion">
                        <dt>促銷</dt>
                        <dd>
                            <em>加購價</em> 滿999.00另加20.00元，或滿1999.00另加30.00元奠衔，或滿2999.00另加40.00元谆刨，即可在購物車換 購熱銷商品 詳情 》
                        </dd>
                    </dl>
                    <dl class="summary_support">
                        <dt>支持</dt>
                        <dd>以舊換新，閑置手機回收 4G套餐超值搶 禮品購</dd>
                    </dl>
                    <dl class="choose_color">
                        <dt>選擇顏色</dt>
                        <dd>
                            <a href="javascript:;" class="current">玫瑰金</a>
                            <a href="javascript:;">金色</a>
                            <a href="javascript:;">白色</a>
                            <a href="javascript:;">土豪色</a>
                        </dd>
                    </dl>
                    <dl class="choose_version">
                        <dt>選擇版本</dt>
                        <dd>
                            <a href="javascript:;" class="current">公開版</a>
                            <a href="javascript:;">移動4G</a>
                        </dd>
                    </dl>
                    <dl class="choose_type">
                        <dt>購買方式</dt>
                        <dd>
                            <a href="javascript:;" class="current">官方標(biāo)配</a>
                            <a href="javascript:;">移動優(yōu)惠購</a>
                            <a href="javascript:;">電信優(yōu)惠購</a>
                        </dd>
                    </dl>
                    <div class="choose_btns">
                        <div class="choose_amount">
                            <input type="text" value="1">
                            <a href="javascript:;" class="add">+</a>
                            <a href="javascript:;" class="reduce">-</a>
                        </div>
                        <a href="#" class="addcar">加入購物車</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- 產(chǎn)品細(xì)節(jié)模塊 product_detail   -->
        <div class="product_detail clearfix">
            <!-- aside -->
            <div class="aside fl">
                <div class="tab_list">
                    <ul>
                        <li class="first_tab ">相關(guān)分類</li>
                        <li class="second_tab current">推薦品牌</li>
                    </ul>
                </div>
                <div class="tab_con">
                    <ul>
                        <li>
                            <img src="upload/aside_img.jpg" alt="">
                            <h5>華為 HUAWEI P20 Pro 全面屏徠卡</h5>
                            <div class="aside_price">￥19</div>
                            <a href="#" class="as_addcar">加入購物車</a>
                        </li>
                        <li>
                            <img src="upload/aside_img.jpg" alt="">
                            <h5>華為 HUAWEI P20 Pro 全面屏徠卡</h5>
                            <div class="aside_price">￥19</div>
                            <a href="#" class="as_addcar">加入購物車</a>
                        </li>
                        <li>
                            <img src="upload/aside_img.jpg" alt="">
                            <h5>華為 HUAWEI P20 Pro 全面屏徠卡</h5>
                            <div class="aside_price">￥19</div>
                            <a href="#" class="as_addcar">加入購物車</a>
                        </li>
                        <li>
                            <img src="upload/aside_img.jpg" alt="">
                            <h5>華為 HUAWEI P20 Pro 全面屏徠卡</h5>
                            <div class="aside_price">￥19</div>
                            <a href="#" class="as_addcar">加入購物車</a>
                        </li>
                        <li>
                            <img src="upload/aside_img.jpg" alt="">
                            <h5>華為 HUAWEI P20 Pro 全面屏徠卡</h5>
                            <div class="aside_price">￥19</div>
                            <a href="#" class="as_addcar">加入購物車</a>
                        </li>
                        <li>
                            <img src="upload/aside_img.jpg" alt="">
                            <h5>華為 HUAWEI P20 Pro 全面屏徠卡</h5>
                            <div class="aside_price">￥19</div>
                            <a href="#" class="as_addcar">加入購物車</a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- detail -->
            <div class="detail fr">
                <div class="detail_tab_list">
                    <ul>
                        <li class="current">商品介紹</li>
                        <li>規(guī)格與包裝</li>
                        <li>售后保障</li>
                        <li>商品評價（50000）</li>
                        <li>手機社區(qū)</li>
                    </ul>
                </div>
                <div class="detail_tab_con">
                    <div class="item">
                        <ul class="item_info">
                            <li>分辨率：1920*1080(FHD)</li>
                            <li>后置攝像頭：1200萬像素</li>
                            <li>前置攝像頭：500萬像素</li>
                            <li>核 數(shù)：其他</li>
                            <li>頻 率：以官網(wǎng)信息為準(zhǔn)</li>
                            <li>品牌： Apple ?關(guān)注</li>
                            <li>商品名稱：APPLEiPhone 6s Plus</li>
                            <li>商品編號：1861098</li>
                            <li>商品毛重：0.51kg</li>
                            <li>商品產(chǎn)地：中國大陸</li>
                            <li>熱點：指紋識別归斤，Apple Pay痊夭，金屬機身，拍照神器</li>
                            <li>系統(tǒng)：蘋果（IOS）</li>
                            <li>像素：1000-1600萬</li>
                            <li>機身內(nèi)存：64GB</li>
                        </ul>
                        <p>
                            <a href="#" class="more">查看更多參數(shù)?</a>
                        </p>
                        <img src="upload/detail_img1.jpg" alt="">
                        <img src="upload/detail_img2.jpg" alt="">
                        <img src="upload/detail_img3.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 詳情頁內(nèi)容部分     -->
    <!-- footer start -->
    <div class="footer">
        <div class="w">
            <!-- mod_service -->
            <div class="mod_service">
                <ul>
                    <li>
                        <i class="mod-service-icon mod_service_zheng"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障脏里，提供發(fā)票</p>
                        </div>
                    </li>
                    <li>
                        <i class="mod-service-icon mod_service_kuai"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障她我，提供發(fā)票</p>
                        </div>
                    </li>
                    <li>
                        <i class="mod-service-icon mod_service_bao"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障，提供發(fā)票</p>
                        </div>
                    </li>
                    <li>
                        <i class="mod-service-icon mod_service_bao"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障迫横，提供發(fā)票</p>
                        </div>
                    </li>
                    <li>
                        <i class="mod-service-icon mod_service_bao"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障番舆，提供發(fā)票</p>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- mod_help -->
            <div class="mod_help">
                <dl class="mod_help_item">
                    <dt>購物指南</dt>
                    <dd> <a href="#">購物流程 </a></dd>
                    <dd> <a href="#">會員介紹 </a></dd>
                    <dd> <a href="#">生活旅行/團(tuán)購 </a></dd>
                    <dd> <a href="#">常見問題 </a></dd>
                    <dd> <a href="#">大家電 </a></dd>
                    <dd> <a href="#">聯(lián)系客服 </a></dd>
                </dl>
                <dl class="mod_help_item">
                    <dt>購物指南</dt>
                    <dd> <a href="#">購物流程 </a></dd>
                    <dd> <a href="#">會員介紹 </a></dd>
                    <dd> <a href="#">生活旅行/團(tuán)購 </a></dd>
                    <dd> <a href="#">常見問題 </a></dd>
                    <dd> <a href="#">大家電 </a></dd>
                    <dd> <a href="#">聯(lián)系客服 </a></dd>
                </dl>
                <dl class="mod_help_item">
                    <dt>購物指南</dt>
                    <dd> <a href="#">購物流程 </a></dd>
                    <dd> <a href="#">會員介紹 </a></dd>
                    <dd> <a href="#">生活旅行/團(tuán)購 </a></dd>
                    <dd> <a href="#">常見問題 </a></dd>
                    <dd> <a href="#">大家電 </a></dd>
                    <dd> <a href="#">聯(lián)系客服 </a></dd>
                </dl>
                <dl class="mod_help_item">
                    <dt>購物指南</dt>
                    <dd> <a href="#">購物流程 </a></dd>
                    <dd> <a href="#">會員介紹 </a></dd>
                    <dd> <a href="#">生活旅行/團(tuán)購 </a></dd>
                    <dd> <a href="#">常見問題 </a></dd>
                    <dd> <a href="#">大家電 </a></dd>
                    <dd> <a href="#">聯(lián)系客服 </a></dd>
                </dl>
                <dl class="mod_help_item">
                    <dt>購物指南</dt>
                    <dd> <a href="#">購物流程 </a></dd>
                    <dd> <a href="#">會員介紹 </a></dd>
                    <dd> <a href="#">生活旅行/團(tuán)購 </a></dd>
                    <dd> <a href="#">常見問題 </a></dd>
                    <dd> <a href="#">大家電 </a></dd>
                    <dd> <a href="#">聯(lián)系客服 </a></dd>
                </dl>
                <dl class="mod_help_item mod_help_app">
                    <dt>幫助中心</dt>
                    <dd>
                        <img src="upload/erweima.png" alt="">
                        <p>品優(yōu)購客戶端</p>
                    </dd>
                </dl>
            </div>
            <!-- mod_copyright  -->
            <div class="mod_copyright">
                <p class="mod_copyright_links">
                    關(guān)于我們 | 聯(lián)系我們 | 聯(lián)系客服 | 商家入駐 | 營銷中心 | 手機品優(yōu)購 | 友情鏈接 | 銷售聯(lián)盟 | 品優(yōu)購社區(qū) | 品優(yōu)購公益 | English Site | Contact U
                </p>
                <p class="mod_copyright_info">
                    地址：北京市昌平區(qū)建材城西路金燕龍辦公樓一層 郵編：100096 電話：400-618-4000 傳真：010-82935100 郵箱: zhanghj+itcast.cn <br> 京ICP備08001421號京公網(wǎng)安備110108007702
                </p>
            </div>
        </div>
    </div>
    <!-- footer end -->
</body>
</html>

css：

base.css：

/*清除元素默認(rèn)的內(nèi)外邊距  */
* {
    margin: 0;
    padding: 0
}
/*讓所有斜體 不傾斜*/
em,
i {
    font-style: normal;
}
/*去掉列表前面的小點*/
li {
    list-style: none;
}
/*圖片沒有邊框   去掉圖片底側(cè)的空白縫隙*/
img {
    border: 0;  /*ie6*/
    vertical-align: middle;
}
/*讓button 按鈕 變成小手*/
button {
    cursor: pointer;
}
/*取消鏈接的下劃線*/
a {
    color: #666;
    text-decoration: none;
}
a:hover {
    color: #e33333;
}
button,
input {
    font-family: 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
    /*取消輪廓線 藍(lán)色的*/
    outline: none;
}
body {
    background-color: #fff;
    font: 12px/1.5 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
    color: #666
}
.hide,
.none {
    display: none;
}
/*清除浮動*/
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}
.clearfix {
    *zoom: 1
}

common.css：

/*公共樣式*/
.fl {
    float: left;
}
.fr {
    float: right;
}
@font-face {
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot?7kkyc2');
    src:  url('../fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?7kkyc2') format('truetype'),
    url('../fonts/icomoon.woff?7kkyc2') format('woff'),
    url('../fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
.fr .icomoon {
    font-family: 'icomoon';
    font-size: 16px;
    line-height: 26px;
}
/*版心*/
.w {
    width: 1200px;
    margin: 0 auto;
}
.style-red {
    color: #c81623;
}
.spacer {
    width: 1px;
    height: 12px;
    background-color: #666;
    margin: 9px 12px 0;
}
/*頂部快捷導(dǎo)航*/
.shortcut {
    height: 31px;
    background-color: #f1f1f1;
    line-height: 31px;
}
.shortcut li {
    float: left;
}
/*header區(qū)域*/
.header {
    position: relative;
    height: 105px;
}
.logo {
    position: absolute;
    top: 25px;
    left: 0;
    width: 175px;
    height: 56px;
}
.logo a {
    display: block;
    /*overflow: hidden;*/
    width: 175px;
    height: 56px;
    background: url(../img/logo.png) no-repeat;
    /*text-indent: -999px;*/
    font-size: 0;
}
.search {
    position: absolute;
    top: 25px;
    left: 348px;
}
.text {
    float: left;
    width: 445px;
    height: 32px;
    border: 2px solid #b1191a;
    padding-left: 10px;
    color: #ccc;
}
.btn {
    float: left;
    width: 82px;
    height: 36px;
    background-color: #b1191a;
    border: 0;
    font-size: 16px;
    color: #fff;
}
.hotwrods {
    position: absolute;
    top: 65px;
    left: 348px;
}
.hotwrods a {
    margin: 0 10px;
}
.shopcar {
    position: absolute;
    top:25px;
    right: 64px;
    width: 138px;
    height: 34px;
    border: 1px solid #dfdfdf;
    background-color: #f7f7f7;
    line-height: 34px;
    text-align: center;
}
.car {
    font-family: 'icomoon';
    color: #da5555;
}
.arrow {
    font-family: 'icomoon';
    margin-left: 5px;
}
.count {
    position: absolute;
    top: -5px;
    /*應(yīng)該是左側(cè)對齊 文字才能往右走顯示*/
    left: 100px;
    background-color: #e60012;
    height: 14px;
    padding: 0 3px;
    line-height: 14px;
    color: #fff;
    /*border-radius: 左上角 右上角  右下角  左下角;*/
    border-radius: 7px 7px 7px 0;
}
/*nav start*/
.nav {
    height: 45px;
    border-bottom: 2px solid #b1191a;
}
.dropdown {
    width: 209px;
    height: 45px;
}
.dropdown .dt {
    height: 100%;
    background-color: #b1191a;
    font-size: 16px;
    color: #fff;
    text-align: center;
    line-height: 45px;
}
.dropdown .dd {
    height: 465px;
    background-color: #c81623;
    margin-top: 2px;
} 
.menu_item:hover {
    background-color: #fff;
}
/*鼠標(biāo)經(jīng)過li 里面的 a變顏色*/
.menu_item:hover a {
    color: #c81623;
}
.menu_item {
    height: 31px;
    line-height: 31px;
    margin-left: 1px;
    padding: 0 10px;
    transition: all .5s;
}
.menu_item:hover {
    padding-left: 20px;
}
.menu_item a {
    font-size: 14px;
    color: #fff;
}
.menu_item i {
    float: right;
    font-family: 'icomoon';
    font-size: 18px;
    color: #fff;
}
.navitems {
    margin-left: 10px;
}
.navitems li {
    float: left;
}
.navitems li a {
    display: block;
    height: 45px;
    padding: 0 25px;
    line-height: 45px;
    font-size: 16px;
}
/*footer 部分*/
.footer {
    height: 386px;
    background-color: #f5f5f5;
    padding-top: 30px;
}
.mod_service {
    height: 79px;
    border-bottom: 1px solid #ccc;
}
.mod_service li {
    float: left;
    width: 240px;
    height: 79px;

}
.mod-service-icon {
    /*浮動的盒子 可以直接給大小的 不需要轉(zhuǎn)換*/
    float: left;
    width: 50px;
    height: 50px;
    margin-left: 35px;
    background: url(../img/icons.png) no-repeat;
}
.mod_service_zheng {
    background-position: -253px -3px;   
}
.mod_service_tit {
    float: left;
    margin-left: 5px;
}
.mod_service_tit h5 {
    margin: 5px 0;
}
.mod_service_kuai {
    background-position: -255px -54px;
}
.mod_service_bao {
    background-position: -257px -105px;
}
.mod_help {
    height: 187px;
    border-bottom: 1px solid #ccc;
}
.mod_help_item {
    float: left;
    width: 150px;
    padding: 20px 0 0 50px;
}
.mod_help_item dt {
    height: 25px;
    font-size: 16px;
}
.mod_help_item dd {
    height: 22px;
}
.mod_help_app dt,
.mod_help_app p {
    padding-left: 15px;
}
.mod_help_app img {
    margin: 7px 0;
}
.mod_copyright {
    text-align: center;
}
.mod_copyright_links {
    margin: 20px 0 15px 0;
}
.mod_copyright_info {
    line-height: 18px;
}

detail.css：

/*詳情頁的樣式文件*/
.de_container {
    margin-top: 20px;
}
.crumb_wrap {
    height: 25px;
}
.crumb_wrap a {
    margin-right: 10px;
}
.preview_wrap {
    width: 400px;
    height: 590px;
}
.preview_img {
    position: relative;
    height: 398px;
    border: 1px solid #ccc;
}
.mask {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 300px;
    background: #FEDE4F;
    opacity: .5;
    border: 1px solid #ccc;
    cursor: move;
}
.big {
    display: none;
    position: absolute;
    left: 410px;
    top: 0;
    width: 500px;
    height: 500px;
    background-color: pink;
    z-index: 999;
    border: 1px solid #ccc;
    overflow: hidden;
}
.big img {
    position: absolute;
    top: 0;
    left: 0;
}
.preview_list {
    position: relative;
    height: 60px;
    margin-top: 60px;
}
.list_item {
    width: 320px;
    height: 60px;
    margin: 0 auto;
}
.list_item li {
    float: left;
    width: 56px;
    height: 56px;
    border: 2px solid transparent;
    margin: 0 2px;
}
.list_item li.current {
    border-color: #c81623;
}
.arrow_prev,
.arrow_next {
    position: absolute;
    top: 15px;
    width: 22px;
    height: 32px;
    background-color: purple;
}
.arrow_prev {
    left: 0;
    background: url(../img/arrow-prev.png) no-repeat;
}
.arrow_next {
    right: 0;
    background: url(../img/arrow-next.png) no-repeat;
}
.itemInfo_wrap {
    width: 718px;
}
.sku_name {
    height: 30px;
    font-size: 16px;
    font-weight: 700;
}
.news {
    height: 32px;
    color: #e12228;
}
.summary dl {
    overflow: hidden;
}
.summary dt,
.summary dd {
    float: left;
}
.summary dt {
    width: 60px;
    padding-left: 10px;
    line-height: 36px;
}
.summary_price,
.summary_promotion {
    position: relative;
    padding: 10px 0;
    background-color: #fee9eb;
}
.price {
    font-size: 24px;
    color: #e12228;
}
.summary_price a {
    color: #c81623;
}
.remark {
    position: absolute;
    right: 10px;
    top: 20px;
}
.summary_promotion {
    padding-top: 0;
}
.summary_promotion dd {
    width: 450px;
    line-height: 36px;
}
.summary_promotion em {
    display: inline-block;
    width: 40px;
    height: 22px;
    background-color: #c81623;
    text-align: center;
    line-height: 22px;
    color: #fff;
}
.summary_support dd {
    line-height: 36px;
}
.choose_color a {
    display: inline-block;
    width: 80px;
    height: 41px;
    background-color: #f7f7f7;
    border: 1px solid #ededed;
    text-align: center;
    line-height: 41px;
}
.summary a.current {
    border-color: #c81623;
}
.choose_version {
    margin: 10px 0;
}
.choose_version a,
.choose_type a {
    display: inline-block;
    height: 32px;
    padding: 0 12px;
    background-color: #f7f7f7;
    border: 1px solid #ededed;
    text-align: center;
    line-height: 32px;
}
.choose_btns {
    margin-top: 20px;
}
.choose_amount {
    position: relative;
    float: left;
    width: 50px;
    height: 46px;
    background-color: pink;
}
.choose_amount input {
    width: 33px;
    height: 44px;
    border: 1px solid #ccc;
    text-align: center;
}
.add,
.reduce {
    position: absolute;
    right: 0;
    width: 15px;
    height: 22px;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    text-align: center;
    line-height: 22px;
}
.add {
    top: 0;
}
.reduce {
    bottom: 0;
    /*禁止鼠標(biāo)樣式*/
    cursor: not-allowed;
    /* pointer  小手  move  移動  */
}
.addcar {
    float: left;
    width: 142px;
    height: 46px;
    background-color: #c81623;
    text-align: center;
    line-height: 46px;
    font-size: 18px;
    color: #fff;
    margin-left: 10px;
    font-weight: 700;
}
.product_detail {
    margin-bottom: 50px;
}
.aside {
    width: 208px;
    border: 1px solid #ccc;
}
.tab_list {
    overflow: hidden;
    height: 34px;
}
/*把背景顏色 底邊框都給 li*/
.tab_list li {
    float: left;
    background-color: #f1f1f1;
    border-bottom: 1px solid #ccc;
    height: 33px;
    text-align: center;
    line-height: 33px;
}
/*鼠標(biāo)單擊 li 變化樣式   背景變白色 去掉下邊框 文字變顏色*/
.tab_list .current {
    background-color: #fff;
    border-bottom: 0;
    color: red;
}
.first_tab {
    width: 104px;
}
.second_tab {
    width: 103px;
    border-left: 1px solid #ccc;
}
.tab_con {
    padding: 0 10px;
}
.tab_con li {
    border-bottom: 1px solid #ccc;
}
.tab_con li h5 {
    /*超出的文字省略號顯示*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 400;
}
.aside_price {
    font-weight: 700;
    margin: 10px 0;
}
.as_addcar {
    display: block;
    width: 88px;
    height: 26px;
    border: 1px solid #ccc;
    background-color: #f7f7f7;
    margin: 10px auto;
    text-align: center;
    line-height: 26px;
}
.detail {
    width: 978px;
}
.detail_tab_list {
    height: 39px;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}
.detail_tab_list li {
    float: left;
    height: 39px;
    line-height: 39px;
    padding: 0 20px;
    text-align: center;
    cursor: pointer;
}
.detail_tab_list .current {
    background-color: #c81623;
    color: #fff;
}
.item_info {
    padding: 20px 0 0 20px;
}
.item_info li {
    line-height: 22px;
}
.more {
    float: right;
    font-weight: 700;
    font-family: 'icomoon';
}

js：

/* detail.js */
window.addEventListener('load', function() {
    var preview_img = document.querySelector('.preview_img');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    // 1. 當(dāng)我們鼠標(biāo)經(jīng)過 preview_img 就顯示和隱藏 mask 遮擋層 和 big 大盒子
    preview_img.addEventListener('mouseover', function() {
        mask.style.display = 'block';
        big.style.display = 'block';
    })
    preview_img.addEventListener('mouseout', function() {
            mask.style.display = 'none';
            big.style.display = 'none';
        })
        // 2. 鼠標(biāo)移動的時候，讓黃色的盒子跟著鼠標(biāo)來走
    preview_img.addEventListener('mousemove', function(e) {
        // (1). 先計算出鼠標(biāo)在盒子內(nèi)的坐標(biāo)
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        // console.log(x, y);
        // (2) 減去盒子高度 300的一半 是 150 就是我們mask 的最終 left 和top值了
        // (3) 我們mask 移動的距離
        var maskX = x - mask.offsetWidth / 2;
        var maskY = y - mask.offsetHeight / 2;
        // (4) 如果x 坐標(biāo)小于了0 就讓他停在0 的位置
        // 遮擋層的最大移動距離
        var maskMax = preview_img.offsetWidth - mask.offsetWidth;
        if (maskX <= 0) {
            maskX = 0;
        } else if (maskX >= maskMax) {
            maskX = maskMax;
        }
        if (maskY <= 0) {
            maskY = 0;
        } else if (maskY >= maskMax) {
            maskY = maskMax;
        }
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';
        // 3. 大圖片的移動距離 = 遮擋層移動距離 * 大圖片最大移動距離 / 遮擋層的最大移動距離
        // 大圖
        var bigIMg = document.querySelector('.bigImg');
        // 大圖片最大移動距離
        var bigMax = bigIMg.offsetWidth - big.offsetWidth;
        // 大圖片的移動距離 X Y
        var bigX = maskX * bigMax / maskMax;
        var bigY = maskY * bigMax / maskMax;
        bigIMg.style.left = -bigX + 'px';
        bigIMg.style.top = -bigY + 'px';

    })
})

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

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

圖片3.png

圖片4.png

13.2.1 clientTop

語法：

element.clientTop

作用：

返回元素上邊框的大小

代碼演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 10px solid red;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        // client 寬度 和我們offsetWidth 最大的區(qū)別就是 不包含邊框
        var div = document.querySelector('div');
        console.log(div.clientTop)
    </script>
</body>
</html>

13.2.2 clientLeft

語法：

element.clientLeft

作用：

返回元素左邊框的大小

代碼演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 10px solid red;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        // client 寬度 和我們offsetWidth 最大的區(qū)別就是 不包含邊框
        var div = document.querySelector('div');
        console.log(div.clientLeft)
    </script>
</body>
</html>

13.2.3 clientWidth

語法：

element.clientWidth

作用：

返回元素自身包括padding呛讲、內(nèi)容區(qū)的寬度禾怠，不含邊框，返回數(shù)值不帶單位

代碼演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 10px solid red;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        // client 寬度 和我們offsetWidth 最大的區(qū)別就是 不包含邊框
        var div = document.querySelector('div');
        console.log(div.clientTop)
    </script>
</body>
</html>

13.2.4 clientHeight

語法：

element.clientHeight

作用：

返回元素自身包括padding贝搁、內(nèi)容區(qū)的高度刃宵，不含邊框，返回數(shù)值不帶單位

代碼演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 10px solid red;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        // client 寬度 和我們offsetWidth 最大的區(qū)別就是 不包含邊框
        var div = document.querySelector('div');
        console.log(div.clientHeight)
    </script>
</body>
</html>

13.3 立即執(zhí)行函數(shù)

13.3.1 立即執(zhí)行函數(shù)

立即執(zhí)行函數(shù) (function(){})() 或者 (function(){}())

主要作用：

創(chuàng)建一個獨立的作用域徘公。避免了命名沖突問題

代碼演示：

<script>
// 1.立即執(zhí)行函數(shù): 不需要調(diào)用牲证，立馬能夠自己執(zhí)行的函數(shù)
function fn() {
    console.log(1);
}
fn();
// 2. 寫法 也可以傳遞參數(shù)進(jìn)來
// 1.(function() {})()    或者  2. (function(){}());
(function(a, b) {
    console.log(a + b);
    var num = 10;
})(1, 2); // 第二個小括號可以看做是調(diào)用函數(shù)
(function sum(a, b) {
    console.log(a + b);
    var num = 10; // 局部變量
}(2, 3));
// 3. 立即執(zhí)行函數(shù)最大的作用就是 獨立創(chuàng)建了一個作用域, 里面所有的變量都是局部變量 不會有命名沖突的情況
</script>

13.3.2 淘寶 flexible.js 源碼分析

(function flexible(window, document) {
    // 獲取的html 的根元素
    var docEl = document.documentElement
        // dpr 物理像素比
    var dpr = window.devicePixelRatio || 1
    // adjust body font size  設(shè)置我們body 的字體大小
    function setBodyFontSize() {
        // 如果頁面中有body 這個元素 就設(shè)置body的字體大小
        if (document.body) {
            document.body.style.fontSize = (12 * dpr) + 'px'
        } else {
            // 如果頁面中沒有body 這個元素，則等著 我們頁面主要的DOM元素加載完畢再去設(shè)置body
            // 的字體大小
            document.addEventListener('DOMContentLoaded', setBodyFontSize)
        }
    }
    setBodyFontSize();
    // set 1rem = viewWidth / 10    設(shè)置我們html 元素的文字大小
    function setRemUnit() {
        var rem = docEl.clientWidth / 10
        docEl.style.fontSize = rem + 'px'
    }
    setRemUnit()
    // reset rem unit on page resize  當(dāng)我們頁面尺寸大小發(fā)生變化的時候关面，要重新設(shè)置下rem 的大小
    window.addEventListener('resize', setRemUnit)
        // pageshow 是我們重新加載頁面觸發(fā)的事件
    window.addEventListener('pageshow', function(e) {
        // e.persisted 返回的是true 就是說如果這個頁面是從緩存取過來的頁面坦袍，也需要從新計算一下rem 的大小
        if (e.persisted) {
            setRemUnit()
        }
    })
    // detect 0.5px supports  有些移動端的瀏覽器不支持0.5像素的寫法
    if (dpr >= 2) {
        var fakeBody = document.createElement('body')
        var testElement = document.createElement('div')
        testElement.style.border = '.5px solid transparent'
        fakeBody.appendChild(testElement)
        docEl.appendChild(fakeBody)
        if (testElement.offsetHeight === 1) {
            docEl.classList.add('hairlines')
        }
        docEl.removeChild(fakeBody)
    }
}(window, document))

13.3.3 淘寶flexibleJS源碼分析之pageshow事件

下面三種情況都會刷新頁面都會觸發(fā) load 事件

a標(biāo)簽的超鏈接
F5或者刷新按鈕（強制刷新）
前進(jìn)后退按鈕

但是火狐中十厢，有個特點，有個“往返緩存”捂齐，這個緩存中不僅保存著頁面數(shù)據(jù)蛮放，還保存了DOM和JavaScript的狀態(tài)；實際上是將整個頁面都保存在了內(nèi)存里奠宜。

所以此時后退按鈕不能刷新頁面包颁。

此時可以使用 pageshow事件來觸發(fā)。压真，這個事件在頁面顯示時觸發(fā)娩嚼，無論頁面是否來自緩存。在重新加載頁面中滴肿，pageshow會在load事件觸發(fā)后觸發(fā)岳悟；根據(jù)事件對象中的persisted來判斷是否是緩存中的頁面觸發(fā)的pageshow事件

注意：這個事件給window添加

代碼演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        // console.log(window.devicePixelRatio);
        window.addEventListener('pageshow', function() {
            alert(11);
        })
    </script>
    <a >鏈接</a>
</body>
</html>

13.4 元素滾動scroll系列

13.4.1 scroll 概述

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

圖片5.png

圖片6.png

頁面被卷去的頭部：

如果瀏覽器的高（或?qū)挘┒炔蛔阋燥@示整個頁面時，會自動出現(xiàn)滾動條堆缘。當(dāng)滾動條向下滾動時滔灶，頁面上面被隱藏掉的高度，我們就稱為頁面被卷去的頭部吼肥。滾動條在滾動時會觸發(fā) onscroll事件录平。

代碼演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 10px solid red;
            padding: 10px;
            overflow: auto;
        }
    </style>
</head>
<body>
    <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)容
    </div>
    <script>
        // scroll 系列
        var div = document.querySelector('div');
        console.log(div.scrollHeight);
        console.log(div.clientHeight);
        // scroll滾動事件當(dāng)我們滾動條發(fā)生變化會觸發(fā)的事件
        div.addEventListener('scroll', function() {
            console.log(div.scrollTop);
        })
    </script>
</body>
</html>

13.4.2 案例講解-仿淘寶固定右側(cè)側(cè)邊欄

原先側(cè)邊欄是絕對定位
當(dāng)頁面滾動到一定位置，側(cè)邊欄改為固定定位
頁面繼續(xù)滾動潜沦，會讓返回頂部顯示出來

案例效果圖：

右側(cè)邊欄.gif

思路：

1. 需要用到頁面滾動事件 scroll  因為是頁面滾動萄涯，所以事件源是document
2. 滾動到某個位置，就是判斷頁面被卷去的上部值唆鸡。
3. 頁面被卷去的頭部：可以通過window.pageYOffset 獲得  如果是被卷去的左側(cè)window.pageXOffset
4. 注意涝影，元素被卷去的頭部是element.scrollTop  , 如果是頁面被卷去的頭部 則是 window.pageYOffset
5. 其實這個值 可以通過盒子的 offsetTop可以得到，如果大于等于這個值争占，就可以讓盒子固定定位了

代碼演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .slider-bar {
            position: absolute;
            left: 50%;
            top: 300px;
            margin-left: 600px;
            width: 45px;
            height: 130px;
            background-color: pink;
        }
        .w {
            width: 1200px;
            margin: 10px auto;
        }
        .header {
            height: 150px;
            background-color: purple;
        }
        .banner {
            height: 250px;
            background-color: skyblue;
        }
        .main {
            height: 1000px;
            background-color: yellowgreen;
        }
        span {
            display: none;
            position: absolute;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div class="slider-bar">
        <span class="goBack">返回頂部</span>
    </div>
    <div class="header w">頭部區(qū)域</div>
    <div class="banner w">banner區(qū)域</div>
    <div class="main w">主體部分</div>
    <script>
        //1. 獲取元素
        var sliderbar = document.querySelector('.slider-bar');
        var banner = document.querySelector('.banner');
        // banner.offestTop 就是被卷去頭部的大小 一定要寫到滾動的外面
        var bannerTop = banner.offsetTop
            // 當(dāng)我們側(cè)邊欄固定定位之后應(yīng)該變化的數(shù)值
        var sliderbarTop = sliderbar.offsetTop - bannerTop;
        // 獲取main 主體元素
        var main = document.querySelector('.main');
        var goBack = document.querySelector('.goBack');
        var mainTop = main.offsetTop;
        // 2. 頁面滾動事件 scroll
        document.addEventListener('scroll', function() {
            // console.log(11);
            // window.pageYOffset 頁面被卷去的頭部
            // console.log(window.pageYOffset);
            // 3 .當(dāng)我們頁面被卷去的頭部大于等于了 172 此時 側(cè)邊欄就要改為固定定位
            if (window.pageYOffset >= bannerTop) {
                sliderbar.style.position = 'fixed';
                sliderbar.style.top = sliderbarTop + 'px';
            } else {
                sliderbar.style.position = 'absolute';
                sliderbar.style.top = '300px';
            }
            // 4. 當(dāng)我們頁面滾動到main盒子燃逻，就顯示 goback模塊
            if (window.pageYOffset >= mainTop) {
                goBack.style.display = 'block';
            } else {
                goBack.style.display = 'none';
            }
        })
    </script>
</body>
</html>

頁面被卷去的頭部兼容性解決方案

需要注意的是，頁面被卷去的頭部臂痕，有兼容性問題伯襟，因此被卷去的頭部通常有如下幾種寫法：

聲明了 DTD，使用 document.documentElement.scrollTop
未聲明 DTD握童，使用 document.body.scrollTop
新方法 window.pageYOffset和 window.pageXOffset姆怪，IE9 開始支持

function getScroll() {
    return {
      left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
      top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
    };
 } 
getScroll().left

三大系列總結(jié)

三大系列比較	作用
e.offsetWidthh	返回自身包括padding、邊框、內(nèi)容區(qū)的寬度稽揭，返回數(shù)值不帶單位
e.clientWidth	返回自身包括padding俺附、內(nèi)容區(qū)域?qū)挾龋缓吙蛳疲粠挝?/td>
e.scrollWidth	返回自身實際寬度事镣，不含邊框，不帶單位

常見用法：

offset經(jīng)常用于獲取元素位置：offsetLeft offsetTop
client經(jīng)常用于獲取元素大小揪胃，clientWidth clientHeight
scroll經(jīng)常用于獲取滾動距離scrollTop scrollLeft
注意頁面滾動距離通過window.pageYOffset獲取

13.5 mouseenter和mouseover的區(qū)別

13.5.1 mouseenter

當(dāng)鼠標(biāo)移動到元素上時就會觸發(fā)mouseenter 事件璃哟，mouseenter 只會經(jīng)過自身盒子觸發(fā)
mouseenter不會冒泡
跟mouseenter搭配鼠標(biāo)離開 mouseleave 同樣不會冒泡

代碼演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .father {
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 100px auto;
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        var father = document.querySelector('.father');
        var son = document.querySelector('.son');
        father.addEventListener('mouseenter', function() {
            console.log(11);
        })
    </script>
</body>
</html>

13.5.2 mouseover

mouseover 鼠標(biāo)經(jīng)過自身盒子會觸發(fā)，經(jīng)過子盒子還會觸發(fā)
mouseover會冒泡

代碼演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .father {
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 100px auto;
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        var father = document.querySelector('.father');
        var son = document.querySelector('.son');
        father.addEventListener('mouseover', function() {
            console.log(11);
        })
    </script>
</body>
</html>