溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

使用webAPI怎么實(shí)現(xiàn)一個(gè)圖片放大功能

發(fā)布時(shí)間：2020-11-23 16:01:58 來源：億速云 閱讀：224 作者：Leah 欄目：開發(fā)技術(shù)

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)使用webAPI怎么實(shí)現(xiàn)一個(gè)圖片放大功能，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

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

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

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

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

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

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

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

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

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

使用webAPI怎么實(shí)現(xiàn)一個(gè)圖片放大功能

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

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

使用webAPI怎么實(shí)現(xiàn)一個(gè)圖片放大功能

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

使用webAPI怎么實(shí)現(xiàn)一個(gè)圖片放大功能

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)

使用webAPI怎么實(shí)現(xiàn)一個(gè)圖片放大功能

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

e是事件對(duì)象。

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

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

使用webAPI怎么實(shí)現(xiàn)一個(gè)圖片放大功能

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

減去后：變成了這樣

使用webAPI怎么實(shí)現(xiàn)一個(gè)圖片放大功能

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

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

使用webAPI怎么實(shí)現(xiàn)一個(gè)圖片放大功能

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

使用webAPI怎么實(shí)現(xiàn)一個(gè)圖片放大功能

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

使用webAPI怎么實(shí)現(xiàn)一個(gè)圖片放大功能

同理上下也是這樣：

使用webAPI怎么實(shí)現(xiàn)一個(gè)圖片放大功能

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

使用webAPI怎么實(shí)現(xiàn)一個(gè)圖片放大功能

就這么兩行代碼

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

素材：

右側(cè)圖片

使用webAPI怎么實(shí)現(xiàn)一個(gè)圖片放大功能

左側(cè)圖片

使用webAPI怎么實(shí)現(xiàn)一個(gè)圖片放大功能

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';

上述就是小編為大家分享的使用webAPI怎么實(shí)現(xiàn)一個(gè)圖片放大功能了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手