JavaScript 图片放大效果：鼠标移至右半部分图片放大

这是一个实现图片放大效果的示例代码，当鼠标移至图片的右半部分时，图片会逐渐放大，移开鼠标则恢复原样。

<!DOCTYPE html>
<html>
<head>
	<title>图片放大效果</title>
	<style type="text/css">
		#img-wrapper {
			display: inline-block;
			position: relative;
			 overflow: hidden;
		}
		#img {
			display: block;
			max-width: 100%;
			transition: all 0.2s ease-in-out;
		}
	</style>
</head>
<body>
	<div id="img-wrapper">
		<img id="img" src="https://via.placeholder.com/500x300" alt="图片">
	</div>
	<script type="text/javascript">
		var imgWrapper = document.getElementById('img-wrapper');
		var img = document.getElementById('img');

		imgWrapper.addEventListener('mousemove', function(event) {
			var x = event.clientX - imgWrapper.offsetLeft;
			var y = event.clientY - imgWrapper.offsetTop;
			var halfWidth = imgWrapper.offsetWidth / 2;

			if (x > halfWidth) {
				var scale = 1 + (x - halfWidth) / halfWidth * 0.1;
				img.style.transform = 'scale(' + scale + ')';
			} else {
				img.style.transform = 'scale(1)';
			}
		});

		imgWrapper.addEventListener('mouseleave', function(event) {
			img.style.transform = 'scale(1)';
		});
	</script>
</body>
</html>

代码解释：

首先，我们需要定义一个容器 #img-wrapper，它用来包裹图片，并设置其 position: relative 和 overflow: hidden 属性；
然后，我们在容器中插入一张图片，并给它设置一个 id 为 img；
接着，在 CSS 中给图片设置一个 max-width: 100% 和 transition: all 0.2s ease-in-out 属性，其中 transition 用来实现图片的渐变效果；
在 JavaScript 中，我们首先获取容器和图片元素的 DOM 对象；
然后，我们监听容器的 mousemove 事件，当鼠标移动时，计算出鼠标在容器中的相对位置 x 和 y，以及容器宽度的一半 halfWidth；
如果鼠标在容器的右半部分，我们就根据 x 的值算出缩放比例 scale，并通过设置图片的 transform 属性来实现图片的缩放效果；
如果鼠标在容器的左半部分，我们则将图片恢复到原始大小；
最后，我们还需要监听容器的 mouseleave 事件，当鼠标移出容器时，将图片恢复到原始大小。

通过以上步骤，我们就实现了鼠标移至图片右半部分，图片逐渐放大的效果。