目標：實現放大鏡的效果
當鼠標放入圖片時，放大圖片，該效果多爲電商網站使用
代碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
#preview>#mediumDiv img
{
vertical-align:middle;
width:350px;
height:350px;
}
#preview{
width:460px;
float:left;
position:relative;
}
#preview>#mediumDiv>#mask{
position: absolute;
width: 175px;
height: 175px;
background: #ffa;
opacity: 0.5;
top: 0;
left: 0;
display:none;
}
#preview>#mediumDiv>#superMask{
position: absolute;
width: 350px;
height: 350px;
opacity: 0;
top: 0;
left: 0;
cursor: move;
}
#preview>#largeDiv{
position: absolute;
width: 400px;
height: 400px;
background: #fff;
border: 1px solid #ddd;
top: 0;
left: 355px;
z-index: 999;
display: none;
}
</style>
</head>
<body>
<div id="preview">
<div id="mediumDiv">
<img id="mImg" src="3.jpg">
<div id="mask"></div>
<div id="superMask"></div>
</div>
<div id="largeDiv"></div>
</div>
</body>
<script>
//獲取lgDiv作爲顯示放大圖
var lgDiv = document.getElementById("largeDiv");
//設置lgDiv的背景圖爲放大圖
lgDiv.style.backgroundImage = "url(4.jpg)";
//獲取mask作爲div中的放大效果(方塊)
var mask = document.getElementById("mask"),
//獲取mask上作爲整體控制位置的sMask
sMask = document.getElementById("superMask");
//給sMask綁定鼠標移入事件，移入sMask更改mask和lgDiv
sMask.onmouseover = function(){
//顯示黃色小方塊mask
mask.style.display = "block";
//顯示放大圖效果lgDiv
lgDiv.style.display="block";
}
//給覆蓋在mask上的sMask綁定鼠標移開事件
sMask . onmouseout = function(){
//當鼠標移開覆蓋在mask上的sMask的時候
//將黃色小框設置爲不顯示
mask.style.display = "none";
//將外部放大框隱藏
lgDiv.style.display="none";
}
//設置最小與最大
var MSIZE=175, MAX=175;
//定義鼠標放入sMask事件
sMask.onmousemove=function(e){
//取消冒泡
//定義top 爲當前的元素的offsetY值-175
//讓光標在黃色方塊的正中間
var top=e.offsetY-MSIZE/2,
//定義左方
left=e.offsetX-MSIZE/2;
if(top<0) top=0;
else if(top>175) top=175;
//如果黃色方塊超出
if(left<0) left=0;
else if(left>175) left=175;
mask.style.left=left+"px";
mask.style.top=top+"px";
lgDiv.style.backgroundPosition=-16/7*left+"px "+(-16/7*top)+"px";
}
</script>
</html>