!--小層--
>
"images/small.png" width=
"350" alt=""/
>
="mask"
>
<
/div>
<
!--遮擋層--
>
<
/div>
<
!--小圖--
>
="big"
>
<
!--大層--
!--大圖--
>
<
/div>
<
!--大圖--
>
<
/div>
<
!--匯入外部的js檔案--
>
//獲取需要的元素
var box = document.
getelementbyid
("box");
//獲取小圖的div
var small = box.children[0]
;//遮擋層
var mask = small.children[1]
;//獲取大圖的div
var big = box.children[1]
;//獲取大圖
var bigimg = big.children[0]
;//滑鼠進入顯示遮擋層和大圖的div
box.
onmouseover
=function()
;//滑鼠離開隱藏遮擋層和大圖的div
box.
onmouseout
=function()
;//滑鼠的移動事件---滑鼠是在小層上移動
small.
onmousemove
=function
(e);
<
/script>
<
/body>
<
/html>
外掛程式 商品放大鏡
看之後搜 有助於理解 這段 我哩哩啦啦寫了三天多，平時都有活今天忙裡偷閒想起之前放大鏡這個功能寫了一半 我是分兩塊寫的，先是讓module就是那個遮罩層能自由的在上跟隨滑鼠走，剩下的就簡單了,遮罩層的left top乘以乙個固定係數就是 放大 的left top 好了我的思路就是 只需要一張，這張畫...
商品放大鏡案例
當滑鼠放在旁邊的小商品上時可以看到乙個相同商品的大圖 一 當滑鼠經過 preview img 就是顯示和隱藏 mask遮擋層和big大盒子 1 分為滑鼠經過 mouseover 和滑鼠離開事件 mouseout 二 滑鼠移動的時候，讓黃色的盒子跟隨滑鼠移動 1 計算滑鼠在盒子內部的座標 2 再用滑鼠...
案例 商品放大鏡效果
整個案例可以分為三個功能模組 滑鼠經過小盒子，黃色的遮擋層和大盒子顯示，離開則隱藏遮擋層和大的盒子的功能 就是顯示與隱藏。黃色的遮藏層要跟隨滑鼠移動的功能 移動黃色的遮擋層，同時大也要跟隨移動的功能 注意 大與遮擋層移動的方向應該是相反的！自己好好想一想是不是這個理 css樣式 preview im...