用webAPI實現(xiàn)圖片放大鏡效果

更新時間：2020年11月23日 09:43:39 作者：黛玉葬花也葬你

這篇文章主要為大家詳細介紹了用webAPI實現(xiàn)圖片放大鏡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了webAPI實現(xiàn)圖片放大鏡效果的具體代碼，供大家參考，具體內(nèi)容如下

實現(xiàn)圖片放大的效果

做這個之前需要會
事件對象.clientX 這個是X軸
事件對象.clientY 這個是Y軸

1.元素.offsetLeft 獲取盒子距離瀏覽器的距離元素.

2.offsetTop 獲取盒子距離瀏覽器頂部的距離

這兩個都是誰有定位我就看誰;

1.元素.offsetWidth 獲取盒子的寬度元

2.素.offsetHeight 獲取盒子的高度

我們要實現(xiàn)這樣的效果：

結(jié)構(gòu)：

在做項目之前我們必須先知道哪些元素是需要獲取的：

圖片中我們可以看出 w是大盒子不需要獲取，leftBox 是我們需要獲取
黃盒子因為我們需要控制里面的盒子進行移動；
rightBox是放大后的盒子獲??；
里面的img也需要獲取，我們需要移動的是rightBox 里面的圖片而不是rightBox；

獲取元素

第一步：鼠標進入顯示

onmouseenter是鼠標進入的意思

當我鼠標進入的時候在修改tool(小黃盒子的display屬性)和右邊盒子讓他進入就顯示

第二步：鼠標離開的時候隱藏

![在這里插入圖片描述](https://img-blog.csdnimg.cn/20201120214428601.png#pic_center)

onmouseleave是鼠標離開的意思

同理當我們鼠標離開的時候吧tool和右邊（rightBox）的大盒子給他隱藏掉.

第三步：鼠標在左盒子移動黃盒子和右圖都要移動

onmousemove鼠標在事件中移動的時候

e是事件對象。

先來看第一步。
e.clicentX clicent是針對于瀏覽器而言，X代表水平方向
e.clicentY 同理針對Y軸；

offsetLeft上面我們也說了。offsetLeft是針對有定位的屬性的距離，因為父盒子是body 有屬性position：state靜態(tài)定位
offsetTop是距離上面的的距離如果不減去會變成這樣：

所以我們需要減去盒子距離左邊和上面的距離；

減去后：變成了這樣

接下來需要減去自身的一半就可以了

首先我們需要獲取黃色盒子的寬和高
offsetHeight獲取盒子的高度；
offsetWidth獲取盒子寬度；
接著就是出去他們自身的一半 / 2；

鼠標就會在黃色盒子的中間顯示；
但是則會不是我們想要的效果；
我們不希望黃色的盒子超出leftBox盒子
這個時候我們就需要使用if進行判斷一下；

x < 0 來判斷是否到達了最左邊如果到達了最左邊吧0賦給x；
但是這樣我們右邊又會超出去這個時候我們需要判斷一下右邊的最大值；
x > 左邊盒子寬度➖黃色的盒子就可以得到他一共可以移動多少距離；

同理上下也是這樣：

好了這樣我們的左側(cè)盒子就算做完了；
下面是實現(xiàn)右側(cè)放大盒子；

就這么兩行代碼

首先我們要先設置他的樣式，左側(cè)圖片大小正好是400px 右側(cè)盒子是800px
我們看到當我們在移動鼠標的時候放大的圖片是反方向移動的所以我們在這里要添加（-）號取反在哪這個去×他的x，y軸就可以放大圖片了

素材：

右側(cè)圖片

左側(cè)圖片

html代碼：

<div class="w">
  <div class="fdj">
   <div class="leftBox" id="_leftBox">
    <!-- 小圖 -->
    <img src="img/m.jpg" alt=""/>
    <!-- 小黃盒子 -->
    <div class="tool" id="_tool"></div>
   </div>
   <div class="rightBox" id="_rightBox">
    <img id="_bImg" src="img/b.jpg" alt=""/>
   </div>
  </div>
</div>

css代碼

* {
 margin:0;
 padding:0;
}

.w {
 width: 1190px;
 margin: 0 auto;

}
.fdj {
 margin-top: 20px;
}

.fdj .leftBox {
 width: 400px;
 height: 400px;
 border: 1px solid #ccc;
 float: left;
 position: relative;
}

.fdj .tool {
 width: 250px;
 height: 250px;
 background:gold;
 opacity:.5;
 filter:alpha(opacity=50);
 position: absolute;
 top:0;
 left: 0;
 cursor: move;
 /* 默認隱藏 */
 display: none;

}
/* 給小黃加上active 就會顯示 */
.fdj .tool.active {
 display: block;
}

.fdj .rightBox {
 width: 500px;
 height: 500px;
 border:1px solid #ccc;
 float: left;
 overflow: hidden;
 /* 隱藏 */
 display: none;
 position: relative;
}
/* 加上active表示顯示 */
.fdj .rightBox.active {
 display: block;
}

.fdj .rightBox img {
 position: absolute;
}

js代碼：

// 獲取元素
var leftBox = document.getElementById('_leftBox')
var tool = document.getElementById('_tool');
var rightBox = document.getElementById('_rightBox');
var bImg = document.getElementById('_bImg');
// 1、鼠標進入顯示
  leftBox.onmouseenter = function () {
   tool.style.display = 'block';
   rightBox.style.display = 'block';
  }


// 2、鼠標離開隱藏
leftBox.onmouseleave = function () {
   tool.style.display = 'none';
   rightBox.style.display = 'none';
  }


// 3、鼠標在左盒子移動黃盒子和右圖都要移動
leftBox.onmousemove = function (e) {
   // 修改黃盒子和右圖left和top
   // 把鼠標的位置給黃盒子、獲取鼠標位置
   var x = e.pageX - leftBox.offsetLeft - tool.offsetWidth / 2;
   var y = e.pageY - leftBox.offsetTop - tool.offsetHeight / 2;
   
   // 判斷距離
   if (x < 0) {
    x = 0;
   } else if (x > leftBox.offsetWidth - tool.offsetWidth) {
    x = leftBox.offsetWidth - tool.offsetWidth;
   }

 

   if (y < 0) {
    y = 0;
   } else if (y > leftBox.offsetHeight - tool.offsetHeight) {
    y = leftBox.offsetHeight - tool.offsetHeight;
   }
   
   // 設置給黃盒子
   tool.style.left = x + 'px';
   tool.style.top = y + 'px';

   // console.log(x, y);
   // // left和top
   bImg.style.left = -2 * x + 'px';
   bImg.style.top = -2 * y + 'px';

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

低代碼從0到1創(chuàng)建小程序項目詳解流程
低代碼作為開發(fā)工具類的產(chǎn)品，需要有從0到1體系化的教程才可以，而且還得有教師進行輔助。否則，學習低代碼是有難度的，入門很難。因為大家習慣了用代碼編程，一下子過度到可視化編程，有一個思路上的轉(zhuǎn)變
2022-08-08
JavaScript實現(xiàn)簡單的文本逐字打印效果示例
這篇文章主要介紹了JavaScript實現(xiàn)簡單的文本逐字打印效果,涉及javascript結(jié)合時間函數(shù)動態(tài)操作頁面元素相關實現(xiàn)技巧,需要的朋友可以參考下
2018-04-04
第八篇Bootstrap下拉菜單實例代碼
這篇文章主要介紹了Bootstrap下拉菜單實例代碼的相關知識，非常不錯，具有參考借鑒價值，感興趣的朋友一起學習吧
2016-06-06
Bootstrap模態(tài)對話框中顯示動態(tài)內(nèi)容的方法
今天小編就為大家分享一篇Bootstrap模態(tài)對話框中顯示動態(tài)內(nèi)容的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
JavaScript中常見的字符串操作函數(shù)及用法匯總
這篇文章主要介紹了JavaScript中常見的字符串操作函數(shù)及用法,實例匯總了javascript常見的字符串轉(zhuǎn)換、分割、查詢、替換等技巧,非常具有實用價值,需要的朋友可以參考下
2015-05-05
Fetch超時設置與終止請求詳解
這篇文章主要給大家介紹了關于Fetch超時設置與終止請求的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Fetch具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2019-05-05
js設置cookie過期當前時間減去一秒相當于立即過期
這篇文章主要介紹了設置js cookie過期(相當于清除瀏覽器對應名稱的cookie)使用方法是當前時間減去一秒相當于立即過期
2014-09-09
JavaScript?ES6模塊導入和導出的方法
ES6在語言標準的層面上實現(xiàn)了模塊功能,而且實現(xiàn)的相當簡單,完全可以取代CommonJS和AMD規(guī)范,成為瀏覽器和服務器通用的模塊解決方案,下面這篇文章主要給大家介紹了關于ES6模塊導入和導出的方法,需要的朋友可以參考下
2022-07-07
基于redis的小程序登錄實現(xiàn)方法流程分析
這篇文章主要介紹了基于redis的小程序登錄實現(xiàn)流程分析，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2020-05-05
JavaScript(js)設置默認輸入焦點(focus)
常常會在回復和引用里使用此功能，即單擊回復或引用，如讓輸入焦點出現(xiàn)在留言輸入框中，如果使用錨來定位，輸入焦點就不能激活了,需要了解的朋友可以參考下
2012-12-12