利用原生js編寫一個(gè)放大鏡功能-創(chuàng)新互聯(lián)

本篇文章為大家展示了利用原生js編寫一個(gè)放大鏡功能，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名與空間、網(wǎng)頁(yè)空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、子長(zhǎng)網(wǎng)站維護(hù)、網(wǎng)站推廣。

1. 查找元素

1.1 查找 main 總分區(qū)
1.2 查找 small 盒子
1.3 查找 small 盒子內(nèi)的 img 小圖片
1.4 查找 mask 遮罩層
1.5 查找 big 盒子
1.6 查找 big 盒子內(nèi)的 img 大圖片

2. 鼠標(biāo)移入 main 的時(shí)候

2.1 顯示遮罩盒子
2.2 顯示大圖分區(qū)

3. 鼠標(biāo)移出 main 的時(shí)候

3.1 隱藏遮罩盒子
3.2 隱藏大圖分區(qū)

4. 鼠標(biāo)在 main 移動(dòng)的時(shí)候 !!!

4.1 遮罩盒子跟隨鼠標(biāo)移動(dòng)
4.2 遮罩盒子在鼠標(biāo)中心處理
4.3 遮罩盒子在分區(qū)邊界內(nèi)移動(dòng)處理
4.4 大圖片 <反向> <按比例> 跟隨鼠標(biāo)移動(dòng)

注意.獲取元素偏移值和寬高

1. 獲取分區(qū) 的水平，垂直偏移值
2. 獲取分區(qū) 的寬度，高度
3. 獲取遮罩盒子的寬度，高度 (隱藏的盒子無(wú)法獲取寬高)
4. 獲取大圖片的寬度，高度 (隱藏的盒子無(wú)法獲取寬高)

html代碼:

<body>
 <!-- 整個(gè)大盒子 -->
 <div class="main" id="main">
  <div class="small">
   <!--小圖-->
   <img alt="" class="smallImg" src="../img/iphoneX.jpg" width="350" />
   <!-- 遮擋層,黃色的小方塊 -->
   <div class="mask"></div>
  </div>
  <!--大層-->
  <div class="big">
   <!--大圖-->
   <img alt="" class="bigImg" src="../img/iphoneX.jpg" width="800" />
  </div>
 </div>
</body>

分享題目：利用原生js編寫一個(gè)放大鏡功能-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)地址：http://www.muchs.cn/article10/ddeodo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、域名注冊(cè)、微信小程序、網(wǎng)頁(yè)設(shè)計(jì)公司、定制網(wǎng)站、網(wǎng)站策劃

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

猜你還喜歡下面的內(nèi)容