整個案例可以分為三個功能模組：
① 滑鼠經過小盒子，黃色的遮擋層和大盒子顯示，離開則隱藏遮擋層和大的盒子的功能：就是顯示與隱藏。
② 黃色的遮藏層要跟隨滑鼠移動的功能：
③ 移動黃色的遮擋層，同時大也要跟隨移動的功能：
注意：大與遮擋層移動的方向應該是相反的！！！自己好好想一想是不是這個理
css樣式
*/.preview_img .mask .big .big img
//js邏輯**
window.addeventlistener('load', function
() );
preview_img.addeventlistener('mouseout', function
() );
//2. 滑鼠移動的時候，讓遮蓋層的盒子跟著滑鼠來走
preview_img.addeventlistener('mousemove', function
(e)
else
if(maskx >=maskmax)
if (masky <= 0)
else
if(masky >=maskmax)
mask.style.left = maskx + 'px';
mask.style.top = masky + 'px';
//3. 大的移動距離 = 遮擋層移動距離 * 大最大移動距離 / 遮擋層的最大移動距離
//大圖
var bigimage = document.queryselector('.bigimage');
//大最大移動距離（大的大小比它的父盒子要大很多）
var bigmax = bigimage.offsetwidth -big.offsetwidth;
//大的移動距離 x y
var bigx = maskx * bigmax /maskmax;
var bigy = masky * bigmax /maskmax;
//注意，大必須與父盒子是定位的關係才能移動
// bigimage.style.left = -bigx + 'px';
bigimage.style.top = -bigy + 'px';
});});
商品放大鏡案例
當滑鼠放在旁邊的小商品上時可以看到乙個相同商品的大圖 一 當滑鼠經過 preview img 就是顯示和隱藏 mask遮擋層和big大盒子 1 分為滑鼠經過 mouseover 和滑鼠離開事件 mouseout 二 滑鼠移動的時候，讓黃色的盒子跟隨滑鼠移動 1 計算滑鼠在盒子內部的座標 2 再用滑鼠...
商品放大鏡
小層 images small.png width 350 alt mask div 遮擋層 div 小圖 big 大層 大圖 div 大圖 div 匯入外部的js檔案 獲取需要的元素 var box document.getelementbyid box 獲取小圖的div var small bo...
外掛程式 商品放大鏡
看之後搜 有助於理解 這段 我哩哩啦啦寫了三天多，平時都有活今天忙裡偷閒想起之前放大鏡這個功能寫了一半 我是分兩塊寫的，先是讓module就是那個遮罩層能自由的在上跟隨滑鼠走，剩下的就簡單了,遮罩層的left top乘以乙個固定係數就是 放大 的left top 好了我的思路就是 只需要一張，這張畫...