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

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

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

主要功能代碼，如下

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

//鼠標在小盒子中移動時 遮蓋層跟著鼠標移動 smallBox.onmousemove = function (e) {e = e || event;//獲取鼠標在小盒子中的坐標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)的大圖部分///計算大圖片的偏移//mask移動的距離/大圖片移動的距離 = mask最大能移動的距離/大圖片最大能移動的距離//大圖片移動的距離=mask移動的距離 * 大圖片最大能移動的距離/mask最大移動的距離//大圖片最大能移動的距離var bigMaxX = bigImg.offsetWidth - bigBox.offsetWidth;var bigMaxY = bigImg.offsetHeight - bigBox.offsetHeight;var bigImgx = x * bigMaxX / maxX;var bigImgy = y * bigMaxY / maxY; //負的 因為左邊圖片鼠標向下移的時候,右邊大圖應(yīng)該向上移動bigImg.style.left = -bigImgx + 'px';bigImg.style.top = -bigImgy + 'px'; }

效果圖

總結(jié)

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

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