腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

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

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

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

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

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

做這個(gè)之前需要會(huì)
事件對(duì)象.clientX 這個(gè)是X軸
事件對(duì)象.clientY 這個(gè)是Y軸

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

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

這兩個(gè)都是誰(shuí)有定位我就看誰(shuí);

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

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

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

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

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

圖片中我們可以看出 w是大盒子不需要獲取，leftBox 是我們需要獲取
黃盒子因?yàn)槲覀冃枰刂评锩娴暮凶舆M(jìn)行移動(dòng)；
rightBox是放大后的盒子獲??；
里面的img也需要獲取，我們需要移動(dòng)的是rightBox 里面的圖片而不是rightBox；

獲取元素

第一步：鼠標(biāo)進(jìn)入顯示

onmouseenter是鼠標(biāo)進(jìn)入的意思

當(dāng)我鼠標(biāo)進(jìn)入的時(shí)候在修改tool(小黃盒子的display屬性)和右邊盒子讓他進(jìn)入就顯示

第二步：鼠標(biāo)離開的時(shí)候隱藏

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

onmouseleave是鼠標(biāo)離開的意思

同理當(dāng)我們鼠標(biāo)離開的時(shí)候吧tool和右邊（rightBox）的大盒子給他隱藏掉.

第三步：鼠標(biāo)在左盒子移動(dòng)黃盒子和右圖都要移動(dòng)

onmousemove鼠標(biāo)在事件中移動(dòng)的時(shí)候

e是事件對(duì)象。

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

offsetLeft上面我們也說(shuō)了。offsetLeft是針對(duì)有定位的屬性的距離，因?yàn)楦负凶邮莃ody 有屬性position：state靜態(tài)定位
offsetTop是距離上面的的距離如果不減去會(huì)變成這樣：

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

減去后：變成了這樣

接下來(lái)需要減去自身的一半就可以了

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

鼠標(biāo)就會(huì)在黃色盒子的中間顯示；
但是則會(huì)不是我們想要的效果；
我們不希望黃色的盒子超出leftBox盒子
這個(gè)時(shí)候我們就需要使用if進(jìn)行判斷一下；

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

同理上下也是這樣：

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

就這么兩行代碼

首先我們要先設(shè)置他的樣式，左側(cè)圖片大小正好是400px 右側(cè)盒子是800px
我們看到當(dāng)我們?cè)谝苿?dòng)鼠標(biāo)的時(shí)候放大的圖片是反方向移動(dòng)的所以我們?cè)谶@里要添加（-）號(hào)取反在哪這個(gè)去×他的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;
 /* 默認(rèn)隱藏 */
 display: none;

}
/* 給小黃加上active 就會(huì)顯示 */
.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、鼠標(biāo)進(jìn)入顯示
  leftBox.onmouseenter = function () {
   tool.style.display = 'block';
   rightBox.style.display = 'block';
  }


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


// 3、鼠標(biāo)在左盒子移動(dòng)黃盒子和右圖都要移動(dòng)
leftBox.onmousemove = function (e) {
   // 修改黃盒子和右圖left和top
   // 把鼠標(biāo)的位置給黃盒子、獲取鼠標(biāo)位置
   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;
   }
   
   // 設(shè)置給黃盒子
   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';

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: