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

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

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

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

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

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

4. 鼠標(biāo)在 main 移動的時候 !!!

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

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

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

html代碼:

<body>
 <!-- 整個大盒子 -->
 <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編寫一個放大鏡功能-創(chuàng)新互聯(lián)
網(wǎng)頁地址：http://jinyejixie.com/article10/ddeodo.html

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

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

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

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