index.html

<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<title>图片放大镜</title>
		<style type="text/css">
			* {
				box-sizing: border-box;
			}
			
			.zoom {
				width: 450px;
				overflow: hidden;
				margin: 100px;
				position: relative;
			}
			
			.zoom img {
				width: 450px;
				/*transition: all 1s;*/
			}
			
			.zoomer {
				position: absolute;
				width: 150px;
				height: 150px;
				left: 0;
				top: 0;
				background-repeat: no-repeat;
				border-radius: 50%;
				opacity: 0;
				transform: scale(0);
				transition: transform .5s, opacity .5s;
				pointer-events: none;
				box-shadow: 0px 0px 4px 2px rgba(0,0,0,.3);
				border: 2px solid #fff;
			}
			
			.zoom:hover .zoomer {
				transform: scale(1);
				opacity: 1;
			}
		</style>
	</head>

	<body>
		<figure class="zoom">
			<img src="https://bestace.github.io/fed/ppt/demos/img/FE.jpg" />
			<div class="zoomer"></div>
		</figure>
		<script type="text/javascript">
			(function() {
				var zoom = document.querySelector('.zoom'),
					zoomer = zoom.querySelector('.zoomer'),
					img=zoom.querySelector('img'),
					Zw = zoomer.offsetWidth,
					Zh = zoomer.offsetHeight;
				var ratio, Ix, Iy;
				
				function getMousePos() {
					var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
					var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
					var x = event.pageX || event.clientX + scrollX;
					var y = event.pageY || event.clientY + scrollY;
					return {
						'x': x,
						'y': y
					};
				}
				
				function getElementPos(obj) {
					//getBoundingClientRect方法
					var rectObject = obj.getBoundingClientRect();
					var x = y = 0;
					return {
						x: rectObject.left,
						y: rectObject.top
					}
				}
				
				function onLoad() {
					ratio = img.naturalWidth / img.width;
					zoomer.style.backgroundImage = 'url(' + img.src + ')';
					zoomer.style.marginLeft = -Zw/2+"px";
					zoomer.style.marginTop = -Zh/2+"px";
					Ix = getElementPos(img).x;
					Iy = getElementPos(img).y;
				}

				function onMousemove(event) {
					var a=getMousePos();
					zoomer.style.top = (a.y-Iy) + 'px';
					zoomer.style.left = (a.x-Ix) + 'px';
					zoomer.style.backgroundPosition = ((Ix-a.x) * ratio + Zw / 2) + 'px ' + ((Iy-a.y) * ratio + Zh / 2) + 'px';
				}
				
				img.addEventListener('load', onLoad);
				img.addEventListener('mousemove', onMousemove);
			})();
		</script>
	</body>

</html>