Mostrar resultados:
Presione el mouse en el área de representación izquierda para mostrar la superposición amarilla y la imagen ampliada a la derecha. Mueva el cursor para seguir el movimiento de la superposición amarilla y cambie el rango de aumento a la derecha. Después de soltar el mouse, la superposición amarilla y el área ampliada a la derecha está oculta.
contenido:
Principio de implementación:
(La descripción del texto es demasiado contundente, y hay un análisis de código separado de la parte JS a continuación, ¡que es más fácil de entender!)
(La descripción del texto es demasiado contundente, y hay un análisis de código separado de la parte JS a continuación, ¡que es más fácil de entender!)
En primer lugar, necesitamos obtener las coordenadas del mouse en el cuadro izquierdo Tomando la abscisa como ejemplo, x = la distancia desde el cursor hasta el lado izquierdo de la página - la distancia desde el cuadro hasta el lado izquierdo . Para decirlo sin rodeos, es e.clientX - leftbox.offsetLeft , y la ordenada es la misma. . Después de obtener los valores obtenidos por x e y menos la mitad del ancho de la capa de la máscara amarilla, se obtienen respectivamente las distancias de la capa de la máscara amarilla al cuadro izquierdo, maskX=mask.offsetWidth/2 , la distancia vertical por encima de la El desplazamiento absoluto del cuadro es el margen superior izquierdo Aquí, la fase principal absoluta secundaria se utiliza para garantizar que el sistema de referencia de la capa de cobertura sea el cuadro izquierdo. Para evitar que la capa de cobertura se mueva más allá del cuadro de la izquierda, se usa una instrucción if para determinar la dirección X y la dirección Y. La parte más difícil es la relación entre el movimiento del cuadro pequeño y el cuadro grande. obtenga la siguiente fórmula : La distancia de movimiento = la distancia de movimiento de la capa de cobertura * la distancia de movimiento máxima de la imagen grande / la distancia de movimiento máxima de la capa de cobertura , para que pueda obtener la distancia de movimiento de la imagen grande, pero pague preste atención a establecer la dirección de movimiento opuesta a la de la imagen pequeña, por lo que en Simplemente agregue un símbolo al frente.
Código de área JS:
<script>
document.addEventListener('DOMContentLoaded',function(){
var smallbox=document.querySelector('.smallbox');
var mask=document.querySelector('.mask');
var bigbox=document.querySelector('.bigbox');
smallbox.addEventListener('mousedown',function(e){
bigbox.style.display='block';
mask.style.display='block';
smallbox.addEventListener('mousemove',fn)
function fn(e){
var X=e.clientX-smallbox.offsetLeft; //光标在盒子内的坐标
var Y=e.clientY-smallbox.offsetTop;
maskX=X-mask.offsetWidth/2; //遮盖层到盒子左和上的距离
maskY=Y-mask.offsetHeight/2;
if(maskX<=0){ //判断是否出界
maskX=0;
}else if(maskX>=smallbox.offsetWidth-mask.offsetWidth){
maskX=smallbox.offsetWidth-mask.offsetWidth;
}
if(maskY<=0){
maskY=0;
}else if(maskY>=smallbox.offsetHeight-mask.offsetHeight){
maskY=smallbox.offsetHeight-mask.offsetHeight;
}
mask.style.left=maskX + 'px'; //判断完是否出界后将距离赋值给遮盖层
mask.style.top=maskY + 'px';
var bigphoto=document.querySelector('.bigphoto'); //获取到右侧的大图片
var bigMapMaxX=bigphoto.offsetWidth-bigbox.offsetWidth; //大图片最大的移动距离
var bigMapMaxY=bigphoto.offsetHeight-bigbox.offsetHeight;
var maskMaxX=smallbox.offsetWidth-mask.offsetWidth; //遮盖层最大的移动距离
var maskMaxY=smallbox.offsetHeight-mask.offsetHeight;
var maxMapX=maskX*bigMapMaxX/maskMaxX; //大盒子移动的距离
var maxMapY=maskY*bigMapMaxY/maskMaxY;
bigphoto.style.left=-maxMapX + 'px';
bigphoto.style.top=-maxMapY + 'px';
}
smallbox.addEventListener('mouseup',function(e){ //鼠标松开后删除mousemove事件
smallbox.removeEventListener('mousemove',fn);
mask.style.display='none';
bigbox.style.display='none';
})
})
})
</script>Código completo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.smallbox{
position: relative;
margin-top: 20px;
width: 400px;
height: 400px;
box-sizing: border-box;
cursor: move;
}
.mask{
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 300px;
height: 300px;
background-color: rgba(255, 224, 88, 0.363);
}
.smallphoto{
width: 400px;
height: 400px;
box-sizing: border-box;
border: 1px solid;
}
.bigbox{
position: absolute;
top: 28px;
left: 503px;
width: 500px;
height: 500px;
box-sizing: border-box;
border: 1px solid;
overflow: hidden;
display: none;
}
.bigphoto{
position: absolute;
top: 0px;
left: 0px;
}
.left{
float: left;
width: 80px;
height: 900px;
background-color: rgb(255, 255, 255);
}
.right{
margin-left: 10px;
float:left;
width: 1180px;
height: 900px;
background-color: rgb(255, 255, 255);
}
</style>
</head>
<body>
<script>
document.addEventListener('DOMContentLoaded',function(){
var smallbox=document.querySelector('.smallbox');
var mask=document.querySelector('.mask');
var bigbox=document.querySelector('.bigbox');
smallbox.addEventListener('mousedown',function(e){
bigbox.style.display='block';
mask.style.display='block';
smallbox.addEventListener('mousemove',fn)
function fn(e){
var X=e.clientX-smallbox.offsetLeft;
var Y=e.clientY-smallbox.offsetTop;
maskX=X-mask.offsetWidth/2;
maskY=Y-mask.offsetHeight/2;
if(maskX<=0){
maskX=0;
}else if(maskX>=smallbox.offsetWidth-mask.offsetWidth){
maskX=smallbox.offsetWidth-mask.offsetWidth;
}
if(maskY<=0){
maskY=0;
}else if(maskY>=smallbox.offsetHeight-mask.offsetHeight){
maskY=smallbox.offsetHeight-mask.offsetHeight;
}
mask.style.left=maskX + 'px';
mask.style.top=maskY + 'px';
var bigphoto=document.querySelector('.bigphoto');
var bigMapMaxX=bigphoto.offsetWidth-bigbox.offsetWidth;
var bigMapMaxY=bigphoto.offsetHeight-bigbox.offsetHeight;
var maskMaxX=smallbox.offsetWidth-mask.offsetWidth;
var maskMaxY=smallbox.offsetHeight-mask.offsetHeight;
var maxMapX=maskX*bigMapMaxX/maskMaxX;
var maxMapY=maskY*bigMapMaxY/maskMaxY;
bigphoto.style.left=-maxMapX + 'px';
bigphoto.style.top=-maxMapY + 'px';
}
smallbox.addEventListener('mouseup',function(e){
smallbox.removeEventListener('mousemove',fn);
mask.style.display='none';
bigbox.style.display='none';
})
})
})
</script>
<div class="left"></div>
<div class="right">
<div class="smallbox">
<div class="mask"></div>
<img src="./iphone.jpg" alt="" class="smallphoto">
</div>
<div class="bigbox">
<img src="./iphone.jpg" alt="" class="bigphoto">
</div>
</div>
</body>
</html>