JavaScript實現的網頁放大鏡效果

阿新 • • 發佈：2019-02-14

今天在觀看視訊學習的時候，學到了一個小技巧。就拿過來與大家進行分享一下啦。

實現的原理

分析需求：需要兩張圖，一大一小。然後根據滑鼠的動作顯示出不同的區域塊的影象。
核心：滑鼠事件的獲取和處理。圖片顯示的時候的放大比例的處理。

編碼實現

大結構是如下：
外邊套一個最大的區域塊，然後再裡面新增不同的顯示。

<body>
<div id="demo">
<!--小圖片顯示區域-->
    <div id="small-box">
    <!--mark表示小圖片的邊界，float-box則代表放大鏡的id--> 

        <div id="mark"></div>
        <div id="float-box"></div>
        <img src="img/small.jpg"/>
    </div>
<!--大圖片顯示區域-->
    <div id="big-box">
        <img src="img/big.jpg"/>
    </div>
</div>
</body>
</html>

然後是樣式表的設定。注意對放大鏡的圖層的處理。主要是和背景圖層的色差很明顯，便於觀察。

* {
            margin: 0;
            padding: 0
        }

        #demo {
            display: block;
            width: 400px;
            height: 255px;
            margin: 50px;
            position: relative;
            border: 1px solid #ccc;
        }

        #small-box {
            position 
: relative;
            z-index: 1;
        }

        #float-box {
            display: none;
            width: 160px;
            height: 120px;
            position: absolute;
            background: #ffffcc;
            border: 1px solid #ccc;
            filter: alpha(opacity=50);
            opacity: 0.5;
        }

        #mark {
            position: absolute;
            display: block;
            width: 400px;
            height: 255px;
            background-color: #fff;
            filter: alpha(opacity=0);
            opacity: 0;
            z-index: 10;
        }

        #big-box {
            display: none;
            position: absolute;
            top: 0;
            left: 460px;
            width: 400px;
            height: 300px;
            overflow: hidden;
            border: 1px solid #ccc;
            z-index: 1;;
        }

        #big-box img {
            position: absolute;
            z-index: 5
        }

再就是核心的編碼了。那就是js程式碼的邏輯處理，主要是關於滑鼠的三個動作事件的捕獲和相應的處理。onmouseover,onmouseout,onmousemove三個函式。

`
//注意是頁面載入完成後才會執行js程式碼
window.onload = function () {

    var objDemo = document.getElementById("demo");
    var objSmallBox = document.getElementById("small-box");
    var objMark = document.getElementById("mark");
    var objFloatBox = document.getElementById("float-box");
    var objBigBox = document.getElementById("big-box");
    var objBigBoxImage = objBigBox.getElementsByTagName("img")[0];

    /**
     * 當滑鼠放到小圖片上時，圖片和放大鏡開始進行顯示
     */
    objMark.onmouseover = function () {
        objFloatBox.style.display = "block";
        objBigBox.style.display = "block";
    };

    /**
     * 滑鼠移出時，就會觸發響應的事件，然後放大鏡和圖片不再顯示
     */
    objMark.onmouseout = function () {
        objFloatBox.style.display = "none";
        objBigBox.style.display = "none";
    };

    /**
     * 滑鼠滑過的時候，對相關的放大的倍數進行計算後對圖片進行輸出
     */
    objMark.onmousemove = function (ev) {

        var _event = ev || window.event;  //相容多個瀏覽器的event引數模式

        /**
         * 這裡的clientX是指滑鼠在瀏覽器中的絕對座標位置，也就是計算網頁中圖片的位置。然後進行絕對化的圖片顯示的過程
         */
        var left = _event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth / 2;
        var top = _event.clientY - objDemo.offsetTop - objSmallBox.offsetTop - objFloatBox.offsetHeight / 2;

        /**
         * 此段程式碼是為了對放大鏡區域移出mark標記塊的時候的處理。
         * 實現的功能是：放大鏡區域只會存在與mark的標記塊內部
         */
        if (left < 0) {
            left = 0;
        } else if (left > (objMark.offsetWidth - objFloatBox.offsetWidth)) {
            left = objMark.offsetWidth - objFloatBox.offsetWidth;
        }

        if (top < 0) {
            top = 0;
        } else if (top > (objMark.offsetHeight - objFloatBox.offsetHeight)) {
            top = objMark.offsetHeight - objFloatBox.offsetHeight;

        }

        /**
         * 設定放大鏡出現的位置
         */
        objFloatBox.style.left = left + "px";   //oSmall.offsetLeft的值是相對什麼而言
        objFloatBox.style.top = top + "px";

        var percentX = left / (objMark.offsetWidth - objFloatBox.offsetWidth);
        var percentY = top / (objMark.offsetHeight - objFloatBox.offsetHeight);

        /**
         * 這裡有亮點需要進行注意：
         * 1.注意負號，因為大圖的顯示的方向與放大鏡的移動方向是相反的
         * 2.注意相乘的比例值的計算
         */
        objBigBoxImage.style.left = -percentX * (objBigBoxImage.offsetWidth - objBigBox.offsetWidth) + "px";
        objBigBoxImage.style.top = -percentY * (objBigBoxImage.offsetHeight - objBigBox.offsetHeight) + "px";
    }
}`

效果展示

這裡寫圖片描述

總結

從上面的程式碼我學到了什麼：

首先是分析問題，只有將問題分析的徹底了，後續的步驟才不會出現意想不到的問題。
然後是實現的思路，仔細想想可以通過什麼方式來實現這些需求。
耐心的編碼，對事件的處理邏輯把握到位！

javascript實現圖片放大鏡效果

當我們在電商網站上購買商品時，經常會看到這樣一種效果，當我們把滑鼠放到我們瀏覽的商品圖片上時，會出現類似放大鏡一樣的一定區域的放大效果，方便消費者觀察商品。今天我對這一技術，進行簡單實現，實現圖片放大鏡效果。我在程式碼中進行了程式碼編寫的思路的說明和詳細的程

JavaScript實現的網頁放大鏡效果

今天在觀看視訊學習的時候，學到了一個小技巧。就拿過來與大家進行分享一下啦。實現的原理分析需求：需要兩張圖，一大一小。然後根據滑鼠的動作顯示出不同的區域塊的影象。核心：滑鼠事件的獲取和處理。圖片顯示的時候的放大比例的處理。編碼實現

JavaScript實現網頁元素的拖拽效果

wid parseint fontsize current ini .net win == oct 以下的頁面中放了兩個div，能夠通過鼠標拖拽這兩個元素到任何位置。實現該效果的HTML頁面代碼例如以下所看到的： <!DOCTYPE html> &

HTML5與Javascript 實現網頁彈球遊戲

fonts tab tool open article idt lang true 用戶終於效果圖： 1. 使用html 5 的canvas 技術和javascript實現彈球遊戲總體流程圖： 1.1 html5 c

javascript實現彈層效果

end 彈層 css樣式 posit .com nload script 代碼 ner 首先，需要有一個按鈕來模擬登錄： <button id="btnLogin"class="login-btn">登錄</button> 然後呢，我們想通過點

原生javascript實現分頁效果+搜尋功能

一、概述首先，我們要明確為何需要分頁技術，主要原因有以下： 1、分頁可以提高客戶體驗度，適當地選擇合適的資料條數，讓頁面顯得更有條理，使得使用者體驗感良好，避免過多資料的冗餘。 2、提高效能的需要。為何需要搜尋技術，主要原因有以下： 1、搜尋功能，能準確的根據使用

用Javascript實現回到頂部效果

經常看到網頁中有回到頂部的效果，今天也研究一下回到頂部有哪些方法。眾所周知，用錨鏈接是實現回到最簡單的方法，但是從使用者體驗效果來說，並不是最好的。（錨鏈接回到頂部時太快了，而且使用者可能在看到某個感興趣的東西想停下來，卻停不下來），針對上面的缺點，我們試著用Javascript的方法來得到實現。思路是這個樣

JavaScript實現點贊效果

1：通過自定義封裝函式來獲取標籤元素；2：建立閉包來實現資料緩衝的效果3：迴圈遍歷按鈕，設定點選事件本文重點：瞭解閉包的作用，通過閉包可以實現資料的緩衝，即外層函式與裡層函式之間的語句在呼叫外層函式時只會執行一次示例程式碼<!DOCTYPE html> <h

JavaScript實現下雪(Snow)效果

程式碼1：<title>Happy New Year</title><body bgcolor="#ff3300" leftmargin="0" topmargin="0" onLoad="snow()" AAAD98><scrip

JavaScript實現網頁列印，可設定頁首、頁尾、頁邊距

WebBrowser是IE內建的瀏覽器控制元件，無需使用者下載,即可實現客戶端頁面列印。關於這個元件還有其他的用法，列舉如下： WebBrowser.ExecWB(1,1) 開啟 Web.ExecWB(2,1) 關閉現在所有的IE視窗，並開啟一個新視窗 Web.Exe

js+jQuery實現網頁打字機效果（帶游標）

在寫網站的時候，有時候可能需要打字機動畫去實現一些頁面效果的顯示，我在網上找了很久也沒有很完整的，符合我要求的程式碼，索性就結合網上的大神們的程式碼段自己寫了一個 HTML <div clas

安卓實現圖片放大鏡效果

一、準備圖片在drawable資料夾下放置需要進行輪詢的圖片二、編寫一個簡單的佈局檔案 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:andr

javascript實現省市級聯效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.

JavaScript實現網頁的自動滾屏顯示

如何實現網頁的自動滾屏顯示？當雙擊網頁的時候，網頁將會自動向下滾動，再次單擊時滾動停止。將下面的程式碼插入到<body></body>之間： <script language="javascript"> var currentpos,t

用javascript 實現網頁滑鼠右鍵彈出選單功能

工作中需要實現在網頁上點右鍵彈出簡單選單的功能，在網上找了一些例子，都比較複雜，其實我這邊只需要實現簡單的選單功能，兩個選項，使用者點選了以後實現一些簡單的ajax功能。於是根據思路，用DOM建立一個選單層，每個選單選項有自己的onclick方法，啟用相應的ajax功能，然後

JavaScript實現網頁底部事件觸發

最近在寫小組官網，想實現一種效果就是根據使用者當前瀏覽情況，載入後續的文章內容，於是就在網上找相關的內容，但是發現好多都是無法實現的，終於在我的苦苦尋找之下，終於找到了解決方案，程式碼如下: function ScrollEvent() {

JavaScript實現網頁中的常見“全選,全不選,反選”的選項框

在瀏覽網頁或者做線上問卷調查時，我們會經常遇到多選框，多選框的下面會有“全選” “全不選” “反選”三個選框，例如下圖所示：具體程式碼實現如下： <!DOCTYPE html> <

js實現圖片放大鏡效果

一、HTML檔案 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

JavaScript 圖片區域性放大鏡效果程式碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html x

網頁對聯效果簡單實現

padding 信息 -i 簡單實現 line height idt pan position 記一下網頁對聯的實現，方便下次找。主要通過三個屬性實現right: 20px;top:180px;position:fixed; <div id="tjzs" styl

JavaScript實現的網頁放大鏡效果

實現的原理

編碼實現

效果展示

總結

相關推薦