看之後搜： 有助於理解 - -
這段**我哩哩啦啦寫了三天多，平時都有活今天忙裡偷閒想起之前放大鏡這個功能寫了一半（我是分兩塊寫的，
先是讓module就是那個遮罩層能自由的在上跟隨滑鼠走，剩下的就簡單了,遮罩層的left、top乘以乙個固定係數就是『放大』的left、top）。好了我的思路就是：只需要一張，這張畫素要大一點，先以縮小的方式展示，然後滑鼠移上去之後，在右側有乙個div，裡面也放著乙個src相同的img，只不過這個img不再是縮小的了。ok 這樣就夠了！
寫之前先複習一下：（如圖）
記住上面的圖
上碼html
當時我很蠢單獨把每個方向都拿出來並且在每個方向下面設定.module的left和top；導致滑鼠在移動的時候**判斷使移動發生了衝突，並未達到我想要的效果。
想想雖然要每個方向都要考慮，但是沒必要每判斷一次給就給.module賦一次值。
把left和top單獨拿出來考慮，最後在把left、top賦值給.module 如下，更好。
// 防止溢位
var l = (left<0)?0:(left>$('.small').width()-$('.module').width())?$('.small').width()-$('.module').width():left;
var t = (top<0)?0:(top>$('.small').height()-$('.module').height())?$('.small').height()-$('.module').height():top;
$('div.module').css('display','block').css('left',l+'px').css('top',t+'px');
商品放大鏡
小層 images small.png width 350 alt mask div 遮擋層 div 小圖 big 大層 大圖 div 大圖 div 匯入外部的js檔案 獲取需要的元素 var box document.getelementbyid box 獲取小圖的div var small bo...
商品放大鏡案例
當滑鼠放在旁邊的小商品上時可以看到乙個相同商品的大圖 一 當滑鼠經過 preview img 就是顯示和隱藏 mask遮擋層和big大盒子 1 分為滑鼠經過 mouseover 和滑鼠離開事件 mouseout 二 滑鼠移動的時候，讓黃色的盒子跟隨滑鼠移動 1 計算滑鼠在盒子內部的座標 2 再用滑鼠...
案例 商品放大鏡效果
整個案例可以分為三個功能模組 滑鼠經過小盒子，黃色的遮擋層和大盒子顯示，離開則隱藏遮擋層和大的盒子的功能 就是顯示與隱藏。黃色的遮藏層要跟隨滑鼠移動的功能 移動黃色的遮擋層，同時大也要跟隨移動的功能 注意 大與遮擋層移動的方向應該是相反的！自己好好想一想是不是這個理 css樣式 preview im...