放大镜（例如电商页面购买手机时鼠标放上去右边出现放大图）

图片大家可以自己找一些试一试
css

*{
	margin: 0;
	padding: 0;
}
#box{
	position: relative;
	width: 400px;
	height: 500px;
	border: solid 1px #cecece;
	margin: 10px;
}
#xiao{
	position: relative;
	width: 400px;
	height: 400px;
	border-bottom: solid 1px #CECECE;
}
#xiao img{
	width: 400px;
	height: 400px;
	display: block;
	border: 0;
}
#room{
	width: 200px;
	height: 200px;
	background: yellow;
	opacity: .3;
	position: absolute;
	display: none;
}
#da{
	width: 400px;
	height: 400px;
	position: absolute;
	left: 400px;
	top: -1px;
	overflow: hidden;
	border: #CECECE solid 1px;
	display: none;
}
#da img{
	width: 800px;
	height: 800px;	
	border: 0;
	position: absolute;
}
ul{
	width: 100%;
	height: 100px;
}
ul li{
	width: 80px;
	height: 80px;
	margin: 10px;
	list-style: none;
	float: left;
}
ul li img{
	width: 80px;
	height: 80px;
}

html和调用js

<div id="box">
	<div id="xiao">
		<img src="m01.jpg" >
		<div id="room"></div>
	</div>
	<div id="da">
		<img src="m01.jpg" >
	</div>
	<ul id="suo">
		<li><img src="m01.jpg" ></li>
		<li><img src="m02.jpg" ></li>
		<li><img src="m03.jpg" ></li>
		<li><img src="m04.jpg" ></li>
		<!-- <li><img src="m05.jpg" ></li> -->
	</ul>
</div>
//调用js文件
<script src="room.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	let room = new Room();
</script>

js

function Room(){
	this.oBox = document.getElementById("box")
	this.oXiao = document.getElementById("xiao")
	this.oRoom = document.getElementById("room")
	this.oXiaoimg = this.oXiao.children[0]
	this.oDa = document.getElementById("da")
	this.oDaimg = this.oDa.children[0]
	this.oSuo = document.getElementById("suo")
	this.aSuoimg = this.oSuo.querySelectorAll("img");
	this.oXiao.onmouseover =()=>{
		this.oRoom.style.display = "block";
		this.oDa.style.display = "block";
	}
	this.oXiao.onmouseout =()=>{
		this.oRoom.style.display = "none";
		this.oDa.style.display = "none";
	}
	
	
	this.oXiao.onmousemove = (e)=>{
		let maxL = this.oXiao.clientWidth-this.oRoom.offsetWidth;//最大left
		let maxT = this.oXiao.clientHeight-this.oRoom.offsetHeight;//最大top
		//取鼠标XY值
		let evt =e||event;
		let x = evt.pageX-this.oBox.offsetLeft;//减去obox到左边到body距离，后面就可以不考虑了
		let y = evt.pageY-this.oBox.offsetTop;
		//让鼠标处于room放大镜中间
		let _left = x-this.oRoom.offsetWidth/2;
		let _top =y-this.oRoom.offsetHeight/2;
		//如果小于0那么最小高度和左边都为0，如果大于等于最大left|top,那么left|top都要等于最大left|top
		_left = _left<=0?0:_left>=maxL?maxL:_left;
		_top = _top<=0?0:_top>=maxT?maxT:_top;
		
		this.oRoom.style.left = _left+"px";
		this.oRoom.style.top = _top+"px";
		//控制大图片的位置
		this.oDaimg.style.left = -this.oRoom.offsetLeft/this.oXiao.offsetWidth*this.oDaimg.offsetWidth+"px";
		this.oDaimg.style.top = -this.oRoom.offsetTop/this.oXiao.offsetHeight*this.oDaimg.offsetHeight+"px";
	}
	for(let i =0;i<this.aSuoimg.length;i++){
	
		this.aSuoimg[i].onclick =()=>{
			this.oXiaoimg.src = this.aSuoimg[i].src;
			this.oDaimg.src = this.aSuoimg[i].src;
		}
	}
}