Tutorial detallado de lupa de imagen (simple y fácil de entender, con anotaciones claras)

1. Introducción detallada

(1) Los elementos básicos de la lupa son los siguientes:

1. Relación de aspecto de la imagen original = relación de aspecto de la miniatura = relación de aspecto de la lupa 2. El múltiplo de la lupa grande y la lupa pequeña = el múltiplo de la imagen original y la imagen en miniatura

3. Por defecto, las dos lupas se superponen con la imagen en la esquina superior izquierda

4. La imagen original se mueve en la dirección opuesta en relación con la lupa pequeña por la distancia múltiple correspondiente

(2) Diagrama de análisis del principio de la lupa:

1.

 2.

3. Imagen:

 

Dos, el código

1. Bajo el código css:

<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 es el siguiente:

<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. El código JavaScript es el siguiente:

<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>

Si crees que es fácil de entender y te ha ayudado en tu estudio, ¡dale me gusta + seguir!

¡Gracias por tu apoyo! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !