JavaScript實(shí)現電商平臺商品細節圖

本文分享一個(gè)電商平臺常見(jiàn)查看商品細節圖案例，如某東網(wǎng)站手機類(lèi)別中具體某一部手機詳情頁(yè)中，手機的細節圖展示，左側小圖獲得用戶(hù)鼠標焦點(diǎn)即可在屏幕右側展示出該圖片區域的大圖效果，其中JS部分主要涉及鼠標經(jīng)過(guò)、鼠標離開(kāi)、鼠標移動(dòng)等事件以及含有一個(gè)小算法公式，先展示效果：

某電商平臺效果圖展示：

本案例代碼部分：

HTML結構：

<div class="box">
        <img src="images/s3.png" alt="">
        <div class="mask"></div>
        <div class="big">
            <img src="images/big.jpg" alt="">
        </div>
</div>

CSS樣式：

<style>
        * {
            padding: 0;
            margin: 0;
        }
 
        .box {
            position: relative;
            top: 70px;
            left: 30px;
            width: 400px;
            height: 400px;
            border: 1px solid #ccc;
        }
        .box > img {
            height: 100%;
        }
 
        .mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 300px;
            height: 300px;
            box-sizing: border-box;
            background-color: rgba(254, 222, 79, .5);
            border: 1px solid #ccc;
            cursor: move;
            /*讓鼠標的狀態(tài)改成十字型*/
        }
 
        .big {
            display: none;
            position: absolute;
            top: 0;
            left: 410px;
            width: 500px;
            height: 500px;
            border: 1px solid #ccc;
            overflow: hidden;
            z-index: 999;
        }
 
        .big img {
            /* 一定要給.big下的img定位屬性它的位置才能隨著(zhù)遮罩層的移動(dòng)而移動(dòng)哦 */
            position: absolute;
            top: 0;
            left: 0;
        }
</style>

JavaScript行為：

<script>
        window.addEventListener('load', function () {
            // 1.獲取元素
            var box = document.querySelector('.box');
            var mask = document.querySelector('.mask');
            var big = document.querySelector('.big');
 
            // 2.注冊事件
            // (1)box鼠標經(jīng)過(guò)即顯示出遮罩層mask和右側大圖 onmouseover  
            box.addEventListener('mouseover', function () {
                mask.style.display = 'block';
                big.style.display = 'block';
            })
            // (2)box鼠標離開(kāi)即隱藏遮罩層mask和右側大圖 onmouseout  
            box.addEventListener('mouseout', function () {
                mask.style.display = 'none';
                big.style.display = 'none';
            })
            // (3)讓mask遮罩層隨著(zhù)鼠標移動(dòng)（此事件要寫(xiě)在獲得鼠標的情況下）
            box.addEventListener('mousemove', function (e) {
                // (1). 先計算出鼠標在盒子內的坐標，鼠標在盒子里的坐標=鼠標在屏幕中的坐標-盒子的offsetLeft/offsetTop
                var x = e.pageX - this.offsetLeft;
                var y = e.pageY - this.offsetTop;
                // (2) 鼠標在遮罩層中應該處于中心的位置，所以還要把鼠標從遮罩層的左上角往右往下移動(dòng)遮罩層寬高的一半才行，即鼠標在盒子里的坐標減去盒子高度的一半和寬度的一半就是我們mask 的最終 left 和top值了
                var maskX = x - mask.offsetWidth / 2;   // 鼠標位置在遮罩層水平中間
                var maskY = y - mask.offsetHeight / 2;   // 鼠標位置在遮罩層垂直中間
 
                // (3) 我們mask 遮罩層水平移動(dòng)的距離即maskX= 遮罩層的父盒子的寬-遮罩層的寬，而遮罩層垂直移動(dòng)的距離即maskY= 遮罩層的父盒子的高-遮罩層的高
                // (4) 如果x 坐標小于了0 就讓他停在0 的位置
                // 遮擋層的最大移動(dòng)距離= 遮罩層的父盒子的寬-遮罩層的寬（因為此案例的遮罩層是一個(gè)正方形，所以水平和垂直的范圍是一致的）
                var maskMax = box.offsetWidth - mask.offsetWidth;   // 遮罩層的最大移動(dòng)距離
                // 判斷限定遮罩層的可移動(dòng)范圍：水平可移動(dòng)范圍：
                maskX <= 0 ? maskX = 0 : maskX = maskX;     // 水平最小可移動(dòng)范圍
                maskX >= maskMax ? maskX = maskMax : maskX = maskX; // 水平最小大可移動(dòng)范圍
                // 判斷限定遮罩層的可移動(dòng)范圍：垂直可移動(dòng)范圍：
                maskY <= 0 ? maskY = 0 : maskY = maskY;     // 垂直最小可移動(dòng)范圍
                maskY >= maskMax ? maskY = maskMax : maskY = maskY; // 垂直最大可移動(dòng)范圍
                // 將鼠標的坐標值給mask的left和top（mask是有定位的）注意要加px單位?。?！
                mask.style.left = maskX + 'px';
                mask.style.top = maskY + 'px';
                // (5)讓右側大圖隨著(zhù)遮罩層移動(dòng)而移動(dòng)
                // 大圖片的移動(dòng)距離 = 遮擋層移動(dòng)距離 * 大圖片最大移動(dòng)距離 / 遮擋層的最大移動(dòng)距離
                // 獲取大圖
                var bigImg = big.querySelector('img');
                // 大圖片最大移動(dòng)距離
                var bigMax = bigImg.offsetWidth - big.offsetWidth;
                // 大圖片的移動(dòng)距離 X Y
                var bigX = maskX * bigMax / maskMax;
                var bigY = maskY * bigMax / maskMax;
                // 注意：1.bigImg獲取到的元素需要有CSS定位屬性才能移動(dòng)位置的，沒(méi)有定位位置是不會(huì )變的哦
                // 2.大圖的移動(dòng)和遮罩層移動(dòng)的方向是相反的哦，因為遮罩層往左移動(dòng)時(shí)實(shí)際上大圖是要往右移動(dòng)的，所以值是負數
                bigImg.style.left = -bigX + 'px';
                bigImg.style.top = -bigY + 'px';
            })
 
        })
</script>

效果展示：

1.程序運行，用戶(hù)鼠標還未經(jīng)過(guò)左側小圖（.box）時(shí)：

2.鼠標經(jīng)過(guò)左側小圖時(shí) ：

3.鼠標在左側小圖（.box）上移動(dòng)時(shí)：

案例知識點(diǎn)及細節：

1.HTML結構部分：主要結構是一個(gè)大的div裝一張圖片（即左側小圖）和兩個(gè)div（一個(gè)遮罩層、一個(gè)右側裝大圖的div），這三個(gè)元素，默認顯示的只有左側的小圖，另外的遮罩層和大圖都是默認隱藏的（即display: none;），且遮罩層和大圖都是通過(guò)定位（子絕父相）放到對應的位置上的，這里需要注意的是右側大圖的z-index需要給個(gè)值，因為一般右側大圖原本的區域是有內容顯示的，大圖可能會(huì )被壓在下面，所以要提一下層級；

2.CSS樣式部分：樣式就根據一般樣式給就可以，唯一一點(diǎn)需要注意的是大圖里面的img要給一個(gè)position: absolute;的絕對定位，這樣JS部分才能通過(guò)left和top來(lái)移動(dòng)圖片的位置實(shí)現大圖隨小圖內鼠標的移動(dòng)而移動(dòng)的效果；

3.JavaScript部分：主要設計鼠標經(jīng)過(guò)事件（onmouseover）、鼠標離開(kāi)事件（onmouseout）和鼠標移動(dòng)事件（onmousemove），注意寫(xiě)在addEventListener()內則不需要加on，且需要用引號引起來(lái)，主要思路是給最外層的大盒子（即.box）添加鼠標經(jīng)過(guò)事件，鼠標經(jīng)過(guò)則讓遮罩層和右側大圖顯示出來(lái)（即display: block;），鼠標離開(kāi)則隱藏（即display: none;），然后再給.box添加鼠標移動(dòng)事件，鼠標在其內部移動(dòng)先獲取到鼠標的坐標（用鼠標的e.pageX - box.offsetLeft得X坐標;Y坐標同理可得），得到鼠標的坐標就可以決定遮罩層的位置了，但是注意鼠標的坐標來(lái)決定遮罩層的位置時(shí)鼠標應該是在遮罩層的中心位置，所以要把得到的鼠標坐標往下和往右移動(dòng)遮罩層高寬的一半，這樣得到的坐標值賦值到遮罩層上（決定的是遮罩層的左上角坐標）才對；

4.遮罩層可以隨著(zhù)鼠標移動(dòng)而移動(dòng)了，但是還有一點(diǎn)那就是遮罩層的移動(dòng)范圍應該是受限的，它不能超出父盒子，所以要添加一個(gè)判斷，如果遮罩層往左走到了0則不能再走，而往右走可以走多少其實(shí)本身是右遮罩層和其父盒子（即.box）的寬度來(lái)決定的，因為遮罩層的移動(dòng)范圍是從0~(box.offsetWidth - mask.offsetWidth)，即0到父盒子的寬度減去遮罩層的寬度得來(lái)的；

5.遮罩層可以正常移動(dòng)了范圍也限制好了接下來(lái)就是右側大圖的顯示了，這里主要設計到一個(gè)算法即：

因為大圖的移動(dòng)和遮罩層的移動(dòng)其實(shí)是有比例關(guān)系的，即遮罩層移動(dòng)多少大圖按照該比例就移動(dòng)多少（比如遮罩層移動(dòng)1px，大圖移動(dòng)2px，那么遮罩層移動(dòng)2px時(shí)大圖就應該移動(dòng)4px），由此公式可得出小圖移動(dòng)時(shí)大圖對應應該移動(dòng)的距離數據，然后將此數據賦值給右側大圖（即div下的img），通過(guò)style.left和style.top即可改變圖標的位置（主要值要加px單位），但是注意，大圖的移動(dòng)和遮罩層的移動(dòng)其實(shí)是相反的哦，如遮罩層往右移動(dòng)，其實(shí)大圖是往左移的（因為大圖要往左走才能展示其右側區域），所以給left和top賦的值要加個(gè)負號哦。

如此，便基本介紹了本案例所涉及的基本知識點(diǎn)和注意點(diǎn)，建議可以結合代碼（內含詳細注釋?zhuān)┛梢愿逦目吹骄幊滩襟E以及實(shí)現思路。本案例是純JS底層代碼實(shí)現（所以具有很多可以?xún)?yōu)化的地方）或許會(huì )有更好更簡(jiǎn)單的方法實(shí)現此功能，但是使用最基本的JS代碼實(shí)現可以比較清晰的理解核心代碼和算法。

以上就是本文的全部?jì)热?，希望對大家的學(xué)習有所幫助，也希望大家多多支持腳本之家。