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

zhibo系統開發發表於2023-02-06

直播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實現圖片放大鏡效果, 更多內容歡迎關注之後的文章


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69978258/viewspace-2934061/,如需轉載,請註明出處,否則將追究法律責任。

相關文章