我們先來簡單實現下放大鏡，嗯嗯…電商專案的商品詳情的放大鏡，差不多就是下面這個樣子吧。
有點小瑕疵，但至少功能實現了。
>
.zoom
#canvas1,#canvas2
style
>
class
="zoom"
>
"canvas1"
width
="600"
height
="337.335"
>
canvas
>
"canvas2"
width
="200"
height
="100"
>
canvas
>
div>
>
var canvas1 = document.
queryselector
("#canvas1");
var canvas2 = document.
queryselector
("#canvas2");
var ctx1 = canvas1.
getcontext
("2d"
)var ctx2 = canvas2.
getcontext
("2d");
//這樣給div加mouse事件，不影響ctx1展示，也不影響ctx2顯示放大部分
var div=document.
queryselector
(".zoom");
// 載入一張並且新增事件
var img =
newimage()
; img.src =
"./bear.png"
; img.
addeventlistener
("load"
, loadhandler)
;function
loadhandler
(e)function
mousehandler
(e)}
script
>
放大鏡 放大鏡應該怎麼選擇，有那些放大鏡
放大鏡是用以放大物體的凸透鏡，顯微鏡的雛形。通常用來觀察物體細節。放大鏡是焦距比眼的明視距離小得多的會聚透鏡。放大鏡按外表分類可以分為可攜式放大鏡 眼鏡式放大鏡和立式放大鏡。按使用人群分類，可分為老年人閱讀放大鏡 兒童放大鏡 戶外便攜放大鏡 專業鑑定測量放大鏡和醫用放大鏡等。台式放大鏡就是可以固定的...
HTML放大鏡實現
前天跟著b站的乙個老師敲了大概兩個小時左右，老師一直說很簡單，但是實現的步驟對於接觸js時間不太長，或者說連皮毛都不是特別懂的我來說，還是需要多多學習。模板是這個樣子，其中引數需要根據新增的不同設定不同值，根據自己所需要的頁面展示風格，也需要改動相應的margin position引數，總的來說就是...
放大鏡原生實現
分析 難點列出 1.滑鼠在區域時，透明小區域出現，放大的區域出現 2.滑鼠移出時，透明小區域小時，放大區域消失 3.透明小區域隨著滑鼠移動 難點解決關鍵 對應解決回答 1.通過滑鼠onmourseover監聽滑鼠的略過，改變透明小區域和放大區域的display，置為block 2.通過滑鼠onmou...