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

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

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

 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代碼:

當(dāng)前標(biāo)題：利用原生js編寫一個放大鏡功能-創(chuàng)新互聯(lián)
標(biāo)題路徑：http://m.jiaotiyi.com/article/ddeodo.html