//小方塊跟隨滑鼠移動
original_move.style.left = e.offsetx - parseint(getcomputedstyle(original_move).width) * 0.5 + 'px';
original_move.style.top = e.offsety - parseint(getcomputedstyle(original_move).height) * 0.5 + 'px';
//控制小方塊活動區域
if (parseint(getcomputedstyle(original_move).top) <= 0)
if (parseint(getcomputedstyle(original_move).left) <= 0)
let original_move_h = original.offsetheight - original_move.offsetheight;
let original_move_w = original.offsetwidth - original_move.offsetwidth;
if (parseint(getcomputedstyle(original_move).top) >= original_move_h)
if (parseint(getcomputedstyle(original_move).left) >= original_move_w)
original_move.style.left = e.offsetx - parseint(getcomputedstyle(original_move).width) * 0.5 + 『px』;這個是為了實現每次透明移動時，滑鼠游標永遠在透明正方形的中間。e.offsetx為獲取滑鼠游標的x軸座標，當減去透明正方形的寬度的一半時，就會讓滑鼠游標在正方形x軸中間，同理y軸也是可以。
if (parseint(getcomputedstyle(original_move).top) <= 0)
if (parseint(getcomputedstyle(original_move).left) <= 0)
這個兩個限制條件約束了，透明正方形的不能越過原圖正方形的上邊與左邊的限制，通過top與left來限制。
let original_move_w = original.offsetwidth - original_move.offsetwidth;
if (parseint(getcomputedstyle(original_move).left) >= original_move_w)
（2）original_move.offsetwidth：透明正方形的可視寬度；（下圖綠色）
（3）parseint(getcomputedstyle(original_move).left) ： 透明正方形的移動距離
（4）original_move_w （紅色部分）
同比例放大原圖：
magnify.scrollleft = parseint(getcomputedstyle(original_move).left) * (magnify.offsetwidth / (original_move_w));
- 通過控制放大圖的scrolltop（滾動條卷去距離);
- 為什麼是parseint(getcomputedstyle(original_move).left) * (magnify.offsetwidth / (original_move_w));因為original_move_w是上圖1的紅色部分，而magnify.offsetwidth為發大正方形的偏移量，通過二者的比值就可以知道發大正方形的滾動條卷去距離。
原生js實現放大鏡效果
我們平時在電商 購物時，需要對選取的某乙個商品進行詳情檢視，此時當滑鼠在商品上某一部分移動檢視時旁邊就會出現乙個該部分的放大效果，這樣就能夠更好的對商品進行分析，下面就使用原生js來實現一下類似放大鏡的效果。思路分析 1.滑鼠切換列表時，pic盒子中的相對應切換 2.在.pic中生成乙個.zoom的...
案例 商品放大鏡效果
整個案例可以分為三個功能模組 滑鼠經過小盒子，黃色的遮擋層和大盒子顯示，離開則隱藏遮擋層和大的盒子的功能 就是顯示與隱藏。黃色的遮藏層要跟隨滑鼠移動的功能 移動黃色的遮擋層，同時大也要跟隨移動的功能 注意 大與遮擋層移動的方向應該是相反的！自己好好想一想是不是這個理 css樣式 preview im...
放大鏡原生實現
分析 難點列出 1.滑鼠在區域時，透明小區域出現，放大的區域出現 2.滑鼠移出時，透明小區域小時，放大區域消失 3.透明小區域隨著滑鼠移動 難點解決關鍵 對應解決回答 1.通過滑鼠onmourseover監聽滑鼠的略過，改變透明小區域和放大區域的display，置為block 2.通過滑鼠onmou...