原生JS實(shí)現(xiàn)的放大鏡功能，自己寫的，簡單使用

點(diǎn)擊下面連接去我的github上下載出來打開就行，不需要復(fù)雜配置，在img標(biāo)簽的src屬性把你自己的圖片換上去就ok。
文件在此

走過路過，喜歡的話點(diǎn)個(gè)贊，加個(gè)關(guān)注，鼓勵(lì)一下吧！

主要功能代碼，如下

原理是判斷鼠標(biāo)在小圖上的位置，再用一個(gè)比例去顯示大圖上對應(yīng)的部分！

//鼠標(biāo)在小盒子中移動(dòng)時(shí) 遮蓋層跟著鼠標(biāo)移動(dòng) smallBox.onmousemove = function (e) {e = e || event;//獲取鼠標(biāo)在小盒子中的坐標(biāo)var x = getPage(e).pageX - box.offsetLeft;var y = getPage(e).pageY - box.offsetTop;x = x - mask.offsetWidth / 2;y = y - mask.offsetHeight / 2;x = x < 0 ? 0 : x;y = y < 0 ? 0 : y;var maxX = smallBox.offsetWidth - mask.offsetWidth;var maxY = smallBox.offsetHeight - mask.offsetHeight;x = x > maxX ? maxX : x;y = y > maxY ? maxY : y;mask.style.left = x + 'px';mask.style.top = y + 'px';//顯示對應(yīng)的大圖部分///計(jì)算大圖片的偏移//mask移動(dòng)的距離/大圖片移動(dòng)的距離 = mask最大能移動(dòng)的距離/大圖片最大能移動(dòng)的距離//大圖片移動(dòng)的距離=mask移動(dòng)的距離 * 大圖片最大能移動(dòng)的距離/mask最大移動(dòng)的距離//大圖片最大能移動(dòng)的距離var bigMaxX = bigImg.offsetWidth - bigBox.offsetWidth;var bigMaxY = bigImg.offsetHeight - bigBox.offsetHeight;var bigImgx = x * bigMaxX / maxX;var bigImgy = y * bigMaxY / maxY; //負(fù)的 因?yàn)樽筮厛D片鼠標(biāo)向下移的時(shí)候,右邊大圖應(yīng)該向上移動(dòng)bigImg.style.left = -bigImgx + 'px';bigImg.style.top = -bigImgy + 'px'; }

效果圖

總結(jié)

以上是生活随笔為你收集整理的原生JS实现放大镜功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。