仿照淘寶的商品放大鏡效果
1.滑鼠經過small，顯示遮蓋層和大圖；離開時隱藏；
2.滑鼠在盒子中移動時，遮蓋層和滑鼠一起移動；
3.遮蓋層移動時，大圖移動；
須注意點：
1.處理小圖時：
滑鼠在遮蓋層的中間，所以遮蓋層的左上角的座標應該在滑鼠在盒子中的位置，減去一半的遮蓋層寬度、高度；
程式碼為：
滑鼠在盒子中的位置
var left = e.clientX+document.body.scrollLeft-small.offsetLeft;
var top = e.clientY+document.body.scrollTop-small.offsetTop;
遮蓋層的左上角位置
left = left-divmove.offsetWidth/2;
top = top-divmove.offsetHeight/2;
當遮蓋層的左上角超出small的區域的時候，需要設定為固定座標（0，0）；
程式碼為：left = left<0? 0 : left;
top = top<0? 0 : top;
當遮蓋層的右下角到達small右下角，要超出的時候，需要設定左上角為固定值（遮蓋層能移動的最大x座標，遮蓋層能移動的最大Y座標）。
程式碼為： left = left>small.offsetWidth-divmove.offsetWidth? small.offsetWidth-divmove.offsetWidth:left;
top = top>small.offsetHeight-divmove.offsetHeight? small.offsetHeight-divmove.offsetHeight:top;
2.在處理大圖時，需要計算大圖的移動位置，此處有一個公式：
遮蓋層移動的距離/遮蓋層能移動的最大距離 = 大圖移動的距離/大圖能移動的最大距離。
所以在得到大圖移動的距離時，程式碼如下：
bigleft = left*(big.children[0].offsetWidth-big.offsetWidth)/(small.offsetWidth-divmove.offsetWidth);
bigtop = top*(big.children[0].offsetHeight-big.offsetHeight)/(small.offsetHeight-divmove.offsetHeight);
在此例中，因為大圖的初始定位在左上角，遮蓋層右移時，大圖應該左移。所以在計算時，大圖的移動的資料應該為負值。
當進行到這個過程中，如果樣式上面的一個小細節你沒有注意到，那麼效果也許會和你想象的不一樣，遮蓋層的這該部分不是大圖顯示的區域。問題出現在樣式定義上（所有盒子均為正方形）：
在定義small的時候有一個比例存在：
遮蓋層的寬度 / big(說明大圖顯示區域的寬度) = 小圖寬度/大圖寬度。
此處我設定為：遮蓋層寬度：50px big：300px
小圖寬度：100px 大圖寬度：600px
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大鏡</title>
<style>
*{
margin: 0;
padding:0;
text-align: center;
}
#sell{
text-align: center;
}
#small{
position: relative;
display: inline-block;
width: 100px;
height: 100px;
vertical-align: top;
overflow: hidden;
}
#small img{
width: 100%;
height: 100%;
}
#big{
top:0px;
left:170px;
width: 300px;
height: 300px;
display: inline-block;
display: none;
overflow: hidden;
position: relative;
}
#move {
position: absolute;
width: 50px;
height: 50px;
z-index: 1;
top:0;
left:0;
background-color: rgba(50,50,50,0.5);
background-position: 0 0;
display: none;
}
#big img{
position: absolute;
left:0px;
top:0px;
width: 600px;
height: 600px;
}
</style>
</head>
<body>
<div id="sell">
<div id="small">
<img src="./images/big.jpg" alt="">
<div id="move"></div>
</div>
<div id="big">
<img src="./images/big.jpg" alt="">
</div>
</div>
<script>
var small = document.getElementById("small");
var big = document.getElementById("big");
var divmove = document.getElementById("move");
small.onmouseover=function(e){
e = e||window.event;
console.log(e);
small.onmousemove = function(e){
e = e||window.event;
console.log(e);
// 小圖形的處理
divmove.style.display = "block";
big.style.display = "block";
// 滑鼠在盒子中的座標
var left = e.clientX+document.body.scrollLeft-small.offsetLeft;
var top = e.clientY+document.body.scrollTop-small.offsetTop;
left = left-divmove.offsetWidth/2;
top = top-divmove.offsetHeight/2;
// move座標顯示在small中
left = left<0? 0 : left;
top = top<0? 0 : top;
left = left>small.offsetWidth-divmove.offsetWidth? small.offsetWidth-divmove.offsetWidth:left;
top = top>small.offsetHeight-divmove.offsetHeight? small.offsetHeight-divmove.offsetHeight:top;
console.log(left+" "+top);
divmove.style.display = "block";
divmove.style.left = left+"px";
divmove.style.top = top+"px";
// 大圖形處理
// move 移動的距離/move最大能移動的距離 = bigimg移動的距離/bigimg最大能移動的距離
bigleft = left*(big.children[0].offsetWidth-big.offsetWidth)/(small.offsetWidth-divmove.offsetWidth);
bigtop = top*(big.children[0].offsetHeight-big.offsetHeight)/(small.offsetHeight-divmove.offsetHeight);
big.children[0].style.left = -bigleft+"px";
big.children[0].style.top= -bigtop+"px";
}
}
small.onmouseout=function(e){
e = e||window.event;
divmove.style.display = "none";
big.style.display = "none";
small.onmousemove = function(e){
}
}
</script>
</body>
</html>3.在滑鼠進入或者滑出盒子時會出現閃爍，原因為onmouseover、onmouseout 會觸發事件冒泡。處理的辦法為換成：onmouseenter onmouseleave。不出現時間冒泡時功能一致，onmouseenter onmouseleave不觸發事件冒泡。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大鏡</title>
<style>
*{
margin: 0;
padding:0;
text-align: center;
}
#sell{
text-align: center;
}
#small{
position: relative;
display: inline-block;
width: 100px;
height: 100px;
vertical-align: top;
overflow: hidden;
}
#small img{
width: 100%;
height: 100%;
}
#big{
top:0px;
left:170px;
width: 300px;
height: 300px;
display: inline-block;
display: none;
overflow: hidden;
position: relative;
}
#move {
position: absolute;
width: 50px;
height: 50px;
z-index: 1;
top:0;
left:0;
background-color: rgba(50,50,50,0.5);
background-position: 0 0;
display: none;
}
#big img{
position: absolute;
left:0px;
top:0px;
width: 600px;
height: 600px;
}
</style>
</head>
<body>
<div id="sell">
<div id="small">
<img src="./images/big.jpg" alt="">
<div id="move"></div>
</div>
<div id="big">
<img src="./images/big.jpg" alt="">
</div>
</div>
<script>
var small = document.getElementById("small");
var big = document.getElementById("big");
var divmove = document.getElementById("move");
small.onmouseenter=function(e){
e = e||window.event;
small.onmousemove = function(e){
e = e||window.event;
// 小圖形的處理
divmove.style.display = "block";
big.style.display = "block";
// 滑鼠在盒子中的座標
var left = e.clientX+document.body.scrollLeft-small.offsetLeft;
var top = e.clientY+document.body.scrollTop-small.offsetTop;
left = left-divmove.offsetWidth/2;
top = top-divmove.offsetHeight/2;
// move座標顯示在small中
left = left<0? 0 : left;
top = top<0? 0 : top;
left = left>small.offsetWidth-divmove.offsetWidth? small.offsetWidth-divmove.offsetWidth:left;
top = top>small.offsetHeight-divmove.offsetHeight? small.offsetHeight-divmove.offsetHeight:top;
divmove.style.display = "block";
divmove.style.left = left+"px";
divmove.style.top = top+"px";
// 大圖形處理
// move 移動的距離/move最大能移動的距離 = bigimg移動的距離/bigimg最大能移動的距離
bigleft = left*(big.children[0].offsetWidth-big.offsetWidth)/(small.offsetWidth-divmove.offsetWidth);
bigtop = top*(big.children[0].offsetHeight-big.offsetHeight)/(small.offsetHeight-divmove.offsetHeight);
big.children[0].style.left = -bigleft+"px";
big.children[0].style.top= -bigtop+"px";
}
}
small.onmouseleave=function(e){
e = e||window.event;
divmove.style.display = "none";
big.style.display = "none";
small.onmousemove = function(e){
}
}
</script>
</body>
</html>