很多電商網(wǎng)站比如：京東拆宛、天貓绒北、淘寶都有放大鏡效果，每當看到心儀的物品時，鼠標移入圖片時诬乞，便呈現(xiàn)出放大的效果。在沒有去理解分析它的原理時柄错，感覺非常的神奇埃碱，當真正地去接觸，也是非常好理解荔仁。如下圖展示所見：
邏輯分析：
1. 有2個圖片（大圖伍宦、小圖），圖片之間都有很好尺寸比例
2. 鼠標移入小圖這里事件采用onmousemove事件乏梁，移入后顯示陰影部分以及右側(cè)大圖
3. 當鼠標移出則隱藏陰影部分以及右側(cè)大圖
4. 鼠標在小圖移動次洼，陰影部分跟隨采用clientX和clientY的位移
5. 鼠標在小圖部分左邊移動，大圖向右掌呜，剛好相反并且*其比例尺寸就是大圖要移動的位置
代碼實現(xiàn)：
<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>Title</title>
</head>
<style>
????*{margin:0;padding:?0}
????#box{
????????width:1200px;
????????height:?700px;
????????border:1px?solid?#ccc;
????????margin:150px;
????}
????#min{
????????float:left;
????????width:400px;
????????height:?400px;
????????position:?relative;
????}
????b{
????????position:?absolute;
????????left:0;
????????top:0;
????????width:200px;
????????height:?200px;
????????background:?blue;
????????opacity:?0.5;
????????display:?none;
????}
????#max{
????????float:right;
????????width:400px;
????????height:?400px;
????????overflow:?hidden;
????????display:?none;
????????position:?relative;
????}
????#imgs{
????????position:?absolute;
????????left:0;
????????top:0;
????}
</style>
<body?style="height:?2000px">
<div?id="box">
????<div?id="min"><img?src="imgs/min.jpg"?alt=""><b></b></div>
????<div?id="max"><img?src="imgs/max.jpg"?alt=""?id="imgs"></div>
</div>
<script?type="text/javascript">
//1》鼠標移入到min這個盒子中滓玖，顯示出來?放大圖片的盒子和小陰影部分
//2》陰影跟隨鼠標移動====》
var?min?=?document.getElementById("min"),
????max?=?document.getElementById("max"),
????b?=?document.getElementsByTagName("b")[0],
????imgs?=?document.getElementById("imgs");
min.onmousemove?=?function(e){
????b.style.display?=?"block";
????max.style.display?=?"block";
????var?scrollLeft?=?document.body.scrollLeft?||?document.documentElement.scrollLeft;
????var?scrollTop?=?document.body.scrollTop?||?document.documentElement.scrollTop;
????var?x?=?e.clientX+scrollLeft-min.offsetLeft-?b.offsetWidth/2;
????var?y?=?e.clientY+scrollTop-min.offsetTop?-?b.offsetHeight/2;
????if(x<0){
????????x=0;
????}else?if(x>min.offsetWidth-b.offsetWidth){
????????x=min.offsetWidth-b.offsetWidth;
????}
????if(y<0){
????????y=0;
????}else?if(y>min.offsetHeight-b.offsetHeight){
???????y=min.offsetHeight-b.offsetHeight;
????}
????b.style.left?=x+"px";
????b.style.top?=y+"px";
????imgs.style.left?=?-2*x+"px";
????imgs.style.top?=?-2*y+"px";
}
min.onmouseout?=?function(){
????b.style.display?=?"none";
????max.style.display?=?"none";
}
</script>
</body>
</html>
原文：https://www.3mooc.com/front/articleinfo/148
