JS写一个把鼠标移到一张图片右半部分的时候右半部分的图片会稍微的变大一点点
以下是一个实现这个效果的示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mouseover Image Zoom</title>
<style>
.container {
position: relative;
width: 400px;
height: 200px;
overflow: hidden;
}
.image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: transform 0.3s ease-out;
}
.image:hover {
transform: scale(1.1);
}
.image.left {
clip: rect(0, 200px, 200px, 0);
}
.image.right {
clip: rect(0, 400px, 200px, 200px);
}
</style>
</head>
<body>
<div class="container">
<img class="image left" src="https://via.placeholder.com/400x200.png?text=Left">
<img class="image right" src="https://via.placeholder.com/400x200.png?text=Right">
</div>
</body>
<script>
const container = document.querySelector('.container');
const leftImage = document.querySelector('.image.left');
const rightImage = document.querySelector('.image.right');
container.addEventListener('mousemove', event => {
const x = event.offsetX / container.offsetWidth;
if (x > 0.5) {
leftImage.style.transform = `scale(${1 - x})`;
rightImage.style.transform = `scale(${1 + x - 0.5})`;
} else {
leftImage.style.transform = `scale(${1 + x})`;
rightImage.style.transform = `scale(${1 - x - 0.5})`;
}
});
container.addEventListener('mouseleave', event => {
leftImage.style.transform = 'scale(1)';
rightImage.style.transform = 'scale(1)';
});
</script>
</html>
这个示例中，我们首先创建了一个容器 .container，并在其中放置了两张图片，分别是左半部分和右半部分，分别用类名 .image.left 和 .image.right 标识。容器使用了 overflow: hidden，以便在图片放大时能够裁剪掉超出容器的部分。
我们使用 CSS 中的 transform 属性来实现图片的缩放效果。当鼠标移到右半部分时，我们使用 transform: scale(1.1) 来将图片放大 10%。这个效果会在鼠标离开图片时自动还原。
为了让右半部分的图片在鼠标移到其上方时比左半部分的图片稍微变大一点点，我们需要在 JS 中通过监听鼠标移动事件来动态计算缩放比例。具体来说，我们首先计算出鼠标在容器内的横向位置 x，然后根据 x 计算出左半部分图片和右半部分图片的缩放比例。这里我们使用了 clip 属性来将图片分离出左右两部分，并使用 scale 属性来缩放图片。
最后，我们还需要在鼠标离开容器时还原图片的缩放效果，这里使用了 mouseleave 事件来监听
原文地址: https://www.cveoy.top/t/topic/fJ5k 著作权归作者所有。请勿转载和采集!