當滑鼠放在旁邊的小商品上時可以看到乙個相同商品的大圖
一、當滑鼠經過 preview_img 就是顯示和隱藏 mask遮擋層和big大盒子
（1）.分為滑鼠經過（mouseover）和滑鼠離開事件（mouseout）
二、滑鼠移動的時候，讓黃色的盒子跟隨滑鼠移動
（1）.計算滑鼠在盒子內部的座標
（2）.再用滑鼠在盒子裡的座標減去黃色盒子大小的一半，讓滑鼠位於黃色盒子中間。
（3）在將滑鼠的座標賦給黃色盒子時先判斷黃色盒子座標是否會超出邊框
三、根據黃色盒子在小里移動的座標等比例的移動大的座標，實現實時放大的效果
（1）.大的移動距離 = 遮擋層移動距離 * 大最大移動距離 / 遮擋層的最大移動距離
（2）.因為遮擋層和大圖移動相反， 所以大圖的座標要加 『-』 號
案例 商品放大鏡效果
整個案例可以分為三個功能模組 滑鼠經過小盒子，黃色的遮擋層和大盒子顯示，離開則隱藏遮擋層和大的盒子的功能 就是顯示與隱藏。黃色的遮藏層要跟隨滑鼠移動的功能 移動黃色的遮擋層，同時大也要跟隨移動的功能 注意 大與遮擋層移動的方向應該是相反的！自己好好想一想是不是這個理 css樣式 preview im...
商品放大鏡
小層 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 好了我的思路就是 只需要一張，這張畫...