使用webAPI怎么實現(xiàn)一個圖片放大功能-創(chuàng)新互聯(lián)

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

成都創(chuàng)新互聯(lián)公司是專業(yè)的古冶網(wǎng)站建設(shè)公司，古冶接單;提供網(wǎng)站設(shè)計制作、成都網(wǎng)站制作,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行古冶網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊,希望更多企業(yè)前來合作!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

onmousemove鼠標(biāo)在事件中移動的時候

e是事件對象。

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

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

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

減去后：變成了這樣

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

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

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

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

同理上下也是這樣：

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

就這么兩行代碼

首先我們要先設(shè)置他的樣式，左側(cè)圖片大小正好是400px 右側(cè)盒子是800px
我們看到當(dāng)我們在移動鼠標(biāo)的時候放大的圖片是反方向移動的所以我們在這里要添加（-）號取反 在哪這個去×他的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>

網(wǎng)頁標(biāo)題：使用webAPI怎么實現(xiàn)一個圖片放大功能-創(chuàng)新互聯(lián)
文章URL：http://muchs.cn/article14/doogde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計、關(guān)鍵詞優(yōu)化、云服務(wù)器、搜索引擎優(yōu)化、響應(yīng)式網(wǎng)站、用戶體驗

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)