Picture magnifying glass detailed tutorial (simple and easy to understand, with clear annotations)

1. Detailed introduction

(1) The basic essentials of the magnifying glass are as follows:

1. Original image aspect ratio = thumbnail aspect ratio = aspect ratio of magnifying glass 2. The multiple of the large magnifying glass and the small magnifying glass = the multiple of the original image and the thumbnail image

3. By default, the two magnifying glasses overlap with the picture in the upper left corner

4. The original image is moved in the opposite direction relative to the small magnifying glass by the corresponding multiple distance

(2) Principle analysis diagram of the magnifying glass:

1.

 2.

3. Picture:

 

Two, the code

1. Under the css code:

<style>
			.little{
				width: 640px;
				height: 400px;
				border: 1px solid black;
				position: relative;
			}
			/* 小图 */
			.little img{
				width: 640px;
				height: 400px;
			}
			/* 小放大镜 */
			.little .mark{
				width: 320px;
				height: 200px;
				background-color: yellow;
				opacity: 0.5;
				position: absolute;
				left: 0;
				top: 0;
				/* 默认隐藏 */
				display: none;
			}
			
			/* 大放大镜 */
			.great{
				width: 960px;
				height: 600px;
			    border: 1px solid red;
				overflow: hidden;
				position: relative;
				/* 默认隐藏 */
				display: none;
			}
			.great img{
				position: absolute;
				left: 0;
				top: 0;
			}
		</style>

 2.html is as follows:

<div class="wrapper">
			<!-- 小图:640*400,缩小3倍 -->
			<div class="little">
				<img src="./img/xhr.jpg" alt="">
				<!-- 放大镜：320*200 -->
				<div class="mark"></div>
			</div>
			
			<!-- 大放大镜 -->
			<div class="great">
				<!-- 大图:1920*1200 -->
				<img src="./img/xhr.jpg" alt="">
			</div>
			
		</div>

3. The JavaScript code is as follows:

<script>
			var _litte=document.querySelector(".little"); //小图框
			var _mark=document.querySelector(".mark");  //小放大镜
			var _great=document.querySelector(".great"); //大放大镜
			var _img=document.querySelector(".great img"); //大图
			
			_litte.onmouseover=function(){
				_great.style.display="block";
				_mark.style.display="block";
			}
			_litte.onmouseout=function(){
				_great.style.display="none";
				_mark.style.display="none";
			}
			_litte.onmousemove=function(event){
				//计算小放大镜的x，y
				var dx=event.clientX-_litte.offsetLeft-_mark.offsetWidth/2;
				var dy=event.clientY-_litte.offsetTop-_mark.offsetHeight/2;
				//到左边
				if(dx<=0){
					dx=0;
				}
				// 到最右边
				if(dx>=_litte.offsetWidth-_mark.offsetWidth){
					dx=_litte.offsetWidth-_mark.offsetWidth;
				}
				_mark.style.left=dx+"px";
				//到上边
				if(dy<=0){
					dy=0;
				}
				//到下边
				if(dy>=_litte.offsetHeight-_mark.offsetHeight){
					dy=_litte.offsetHeight-_mark.offsetHeight;
				}
				_mark.style.top=dy+"px";
				
				_img.style.left=-3*dx+"px";
				_img.style.top=-3*dy+"px";
			}
		</script><script>
			var _litte=document.querySelector(".little"); //小图框
			var _mark=document.querySelector(".mark");  //小放大镜
			var _great=document.querySelector(".great"); //大放大镜
			var _img=document.querySelector(".great img"); //大图
			
			_litte.onmouseover=function(){
				_great.style.display="block";
				_mark.style.display="block";
			}
			_litte.onmouseout=function(){
				_great.style.display="none";
				_mark.style.display="none";
			}
			_litte.onmousemove=function(event){
				//计算小放大镜的x，y
				var dx=event.clientX-_litte.offsetLeft-_mark.offsetWidth/2;
				var dy=event.clientY-_litte.offsetTop-_mark.offsetHeight/2;
				//到左边
				if(dx<=0){
					dx=0;
				}
				// 到最右边
				if(dx>=_litte.offsetWidth-_mark.offsetWidth){
					dx=_litte.offsetWidth-_mark.offsetWidth;
				}
				_mark.style.left=dx+"px";
				//到上边
				if(dy<=0){
					dy=0;
				}
				//到下边
				if(dy>=_litte.offsetHeight-_mark.offsetHeight){
					dy=_litte.offsetHeight-_mark.offsetHeight;
				}
				_mark.style.top=dy+"px";
				
				_img.style.left=-3*dx+"px";
				_img.style.top=-3*dy+"px";
			}
		</script>

If you think it is easy to understand and has brought help to your study, please like + follow!

Thank you for your support! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !