HTML放大镜 （商品放大镜）

HTML 放大镜（商品放大镜）

HTML部分

<table border="1" align="center" width="490px">
					<tr height="500px">
						<td colspan="4" width="200px" height="200px">
							<img id="tu" src="图片地址" width="100%" onmousemove="fangdajing(event)"
								onmouseout="xiaoshi()">
							<canvas id="mycanvas" width="" height=""></canvas>
						</td>
					</tr>
					<tr hright="125px">
						<td width="50px" height="50px"> <img src="图片地址" alt="" width="100%"height="100%" onmouseenter="xianshi(this)"></td>
						<td width="50px" height="50px"><img src="图片地址" alt="" width="100%"height="100%" onmouseenter="xianshi(this)"></td>
						<td width="50px" height="50px"> <img src="图片地址" alt="" width="100%"height="100%" onmouseenter="xianshi(this)"></td>
						<td width="50px" height="50px"><img src="图片地址" alt="" width="100%"height="100%" onmouseenter="xianshi(this)"></td>
					</tr>
				</table>
				```
				CSS部分
				canvas {
				width: 100px;
				height: 100px;
				border: 2px solid red;
				position: absolute;
				border-radius: 50%;
			}

			table {
				position: absolute;
			}
			
JS部分
<script type="text/javascript">
		//放大镜
		var canvas = document.getElementById("mycanvas");
		var context = canvas.getContext("2d");
		canvas.style.display = "none";

		function xiaoshi() {
			canvas.style.display = "none";
		}

		function fangdajing(e) {
			canvas.style.display = "block";
			canvas.style.left = e.layerX + 10 + "px";
			canvas.style.top = e.layerY + 10 + "px";
			var img = new Image;
			img.src = document.getElementById("tu").src;
			var image = document.getElementById("tu");
			var sw = img.width / image.width;
			var sh = img.height / image.height
			context.clearRect(0, 0, canvas.width, canvas.height);
			context.drawImage(img, e.layerX * sw, e.layerY * sh, 50 * sw, 50 * sh, 0, 0, canvas.width, canvas.height);


		}
		</script>