直播app開發搭建，純javascript實現圖片放大鏡效果

直播app開發搭建，純javascript實現圖片放大鏡效果

1、 放大鏡組成

1）目標圖片，一般是小圖

2）滑鼠移動上去的一個等比例小框框圖

3）彈窗顯示一個等比例的大圖

2、實現分析

1）假如目標圖片為寬度為500px，高度為200px，500:200的比例

2）那麼定位遮罩就是，50:20

小方框遮罩和目標區域是50:500，10倍的關係

3）所以放大鏡設定10倍比例就是，5000:2000

當然也可以設定動態比例引數，+-加減符號來調整

4）目標圖片到瀏覽器頂部距離

關鍵點：targetObj.getBoundingClientRect().top，這個是到可視範圍的瀏覽器頂部

特別注意：targetObj.offsetTop，這個值是指實際的距離，就是獲取父元素的距離

5）獲取class元素方法

querySelector和querySelectorAll

6）

3、佈局設計

1）設定3張圖片，統一設定class為targetImage

2）每張圖片區域對應一個小方框遮罩，class為positionMask

當然這個遮罩也可以動態追加，此處不做實現

3）設定一個放大鏡區域，樣式class設定為enlargeArea

區域內就是具體的img標籤，可以設定樣式class為enlargeImage

<ul>
    <li>
        <img class="targetImage" src="" width="500" height="200" />
        <div class="postionMask"></div>
    </li>
    <li>
        <img class="targetImage" src="" width="500" height="200" />
        <div class="postionMask"></div>
    </li>
    <li>
        <img class="targetImage" src="" width="500" height="200" />
        <div class="postionMask"></div>
    </li>
</ul>
 
<div class="enlargeArea">
    <img class="enlargeImage" src="img/1200543.jpg" />
</div>

完整程式碼

 
<style>
    * { padding: 0; margin: 0; list-style: none; border: 0; }
    ul { width: 500px; height: 200px; overflow: hidden; margin-left: 100px; position: relative; }
        ul li { float: left; }
    .enlargeArea { box-shadow: 0 0 13px #ccc; height: 200px; width: 500px; overflow: hidden; position: fixed; top: 0; left: 0; background: #fff; border-radius: 10px; display: none; }
        .enlargeArea img { position: absolute; height: 2000px; width: 5000px; top: 0; left: 0; }
    .targetImage { position: relative }
    .postionMask { position: absolute; left: 0; top: 0; width: 50px; height: 20px; display: none; background-color: rgb(224, 117, 240, 0.6); }
</style>
 
<div style="width:100%;height:100px;"></div>
<ul>
    <li class="targetImageParent">
        <img class="targetImage" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2%2F54699bf470c9a.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672062275&t=fa53ab442a8f11449e2c565745388654" width="500" height="200" />
        <div class="postionMask"></div>
    </li>
    <li class="targetImageParent">
        <img class="targetImage" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2%2F57a2b93424164.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672062275&t=c270d62648a24edcd927f319b677d93a" width="500" height="200" />
        <div class="postionMask"></div>
    </li>
    <li class="targetImageParent">
        <img class="targetImage" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fb%2F568e0e5a339f9.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672062275&t=62fcbf112e7c0b3fb9ebc197c725c2a2" width="500" height="200" />
        <div class="postionMask"></div>
    </li>
</ul>
 
<div class="enlargeArea">
    <img class="enlargeImage" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2%2F54699bf470c9a.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672062275&t=fa53ab442a8f11449e2c565745388654" />
</div>
 
<script type="text/javascript">
 
    // 獲取目標圖片有多少張
    var length = document.querySelectorAll('.targetImage').length;
    for (var i = 0; i < length; i++) {
        //給每張圖片繫結事件
        bind(i);
    }
 
    // 繫結事件
    function bind(i) {
        let targetImageParent = document.querySelectorAll(".targetImageParent")[i]; // 目標圖片所在的父級物件
        let postionMask = document.querySelectorAll(".postionMask")[i];             // 小方框遮罩物件
        let enlargeArea = document.querySelector(".enlargeArea");                   // 放大鏡區域
        let enlargeImage = document.querySelector(".enlargeImage");                 // 放大鏡區域圖片
 
        // 滑鼠移開目標區域，隱藏放大鏡彈窗和小方框遮罩
        targetImageParent.onmouseleave = function () {
            postionMask.style.display = "none";
            enlargeArea.style.display = "none";
        }
 
        // 設定引數
        var starty = 0          // 滑鼠進入目標區域的y軸座標，也就是top值
        var startx = 0          // 滑鼠進入目標區域的x軸座標，也就是left值
        var maskStartTop = 0;   // 小方框遮罩左上角的x軸座標值
        var maskStartLeft = 0;  // 小方框遮罩左上角的x軸座標值
 
        // 滑鼠進入目標區域，顯示放大鏡彈窗和小方框遮罩
        targetImageParent.onmouseenter = function (e) {
            starty = e.clientY;
            startx = e.clientX;
 
            var parent = this.parentElement;    // 這個需要注意，根據自己設定的固定區域來
            maskStartTop = parent.getBoundingClientRect().top;
            maskStartLeft = parent.getBoundingClientRect().left;
            postionMask.style.display = "block";
 
            // 放大鏡圖
            enlargeArea.style.display = "block";
            enlargeArea.style.top = maskStartTop - 100 + "px";
            enlargeArea.style.left = maskStartLeft + this.clientWidth + 20 + "px";
 
            // 獲取src圖片路徑值
            enlargeImage.setAttribute('src', targetImageParent.getElementsByTagName('img')[0].getAttribute('src'));
        }
 
        // 滑鼠在目標區域移動
        targetImageParent.onmousemove = function (e) {
 
            let x = e.clientX - startx - postionMask.clientWidth / 2;
            let y = e.clientY - starty - postionMask.clientHeight / 2;
 
            var mY = e.clientY - maskStartTop - 5;
            //if (mY <= 0) mY = 0; // 可擴充套件移動到邊界小方框遮罩不出借，此處暫不實現
            var mX = e.clientX - maskStartLeft - 25;
            //if (mX <= 0) mX = 0;
 
            // 小方框位置
            postionMask.style.top = mY + "px";
            postionMask.style.left = mX + 'px';
 
            // 放大鏡圖片對應顯示，實際上就是等比定位
            enlargeImage.style.top = -(mY - 0) * 10 + 'px';
            enlargeImage.style.left = -(mX - 0) * 10 + 'px';
        }
    }
</script>

以上就是直播app開發搭建，純javascript實現圖片放大鏡效果， 更多內容歡迎關注之後的文章