功能概要
可放大並檢視
顯示效果
實現思路
主要分為展示盒子、遮擋層、大圖顯示盒子
首先需要完成遮擋層隨著滑鼠的移動而移動，且遮擋層盒子移動座標計算方式為：滑鼠當前座標 減去 盒子的offsetwidth，即滑鼠在大盒子中的位置
考慮大圖隨著遮擋層的移動而移動，由於遮擋層的移動距離與大圖的移動距離不是對等關係，因此為了按照一定比列進行移動並顯示，大圖的計算方式應該如下：
大圖的移動距離 / 大圖最大移動距離 = 遮擋層的移動距離 / 遮擋層最大移動距離
大圖移動距離 = 大圖最大移動距離 * 遮擋層的移動距離 / 遮擋層最大移動距離
元素偏移量offset系列
滑鼠事件，mouseover，mouseout，mousemove
滑鼠物件屬性：e.pagex/e.pagey，（獲取滑鼠觸發事件處相對於文件頁面的x/y座標，ie9以上支援）
注意點案例中設計的box盒子長度並沒有考慮正方形，因此需要每次都計算x以及y的值，方便起見可以將盒子長寬一致，方便計算。
實現**
html
.box
.img
.mask
.rightbox
.bigimg
window.addeventlistener('load',function () )
// 滑鼠離開 隱藏遮擋層和大圖
box.addeventlistener('mouseout',function () )
// 盒子跟著滑鼠移動
box.addeventlistener('mousemove',function (e) else if (x >= maskmax)
if (y <= 0) else if (y >= this.offsetheight - mask.offsetheight)
// 設定遮擋層相對於大盒子的位置
mask.style.left = x + 'px';
mask.style.top = y + 'px';
// 大圖的顯示 大圖的移動距離 / 大圖最大移動距離 = 遮擋層的移動距離 / 遮擋層最大移動距離
var bigimg = document.queryselector('.bigimg');
var bigmax = rightbox.offsetwidth - bigimg.offsetwidth;
// 分別設定大圖移動距離的x y
var big_x = x * maskmax / bigmax;
var big_y = y * (this.offsetheight - mask.offsetheight) / bigmax;
bigimg.style.left = -big_x + 'px';
bigimg.style.top = -big_y + 'px';
})})
放大鏡 放大鏡應該怎麼選擇，有那些放大鏡
放大鏡是用以放大物體的凸透鏡，顯微鏡的雛形。通常用來觀察物體細節。放大鏡是焦距比眼的明視距離小得多的會聚透鏡。放大鏡按外表分類可以分為可攜式放大鏡 眼鏡式放大鏡和立式放大鏡。按使用人群分類，可分為老年人閱讀放大鏡 兒童放大鏡 戶外便攜放大鏡 專業鑑定測量放大鏡和醫用放大鏡等。台式放大鏡就是可以固定的...
HTML放大鏡實現
前天跟著b站的乙個老師敲了大概兩個小時左右，老師一直說很簡單，但是實現的步驟對於接觸js時間不太長，或者說連皮毛都不是特別懂的我來說，還是需要多多學習。模板是這個樣子，其中引數需要根據新增的不同設定不同值，根據自己所需要的頁面展示風格，也需要改動相應的margin position引數，總的來說就是...
canvas實現放大鏡
我們先來簡單實現下放大鏡，嗯嗯 電商專案的商品詳情的放大鏡，差不多就是下面這個樣子吧。有點小瑕疵，但至少功能實現了。zoom canvas1,canvas2 style class zoom canvas1 width 600 height 337.335 canvas canvas2 width ...