放大镜案例-通过鼠标滑动主图实现放大

江沉晚眠时尽

于 2022-03-12 22:07:47 发布

阅读量601

点赞数

分类专栏： js web前端文章标签： javascript html css

本文链接：https://blog.csdn.net/cm200225/article/details/123451360

版权

html如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{padding: 0;margin: 0;}
			#small{width:300px;height: 225px;float: left;border: 1px solid #000;position: relative;}
			#big{width:300px;height: 225px;float: left;overflow: hidden;border: 1px solid #000;position: relative;margin-left: 40px;}
			#mark{width: 100px;height: 100px;opacity: 0.5;background-color: #000;position: absolute;top: 0;left: 0;cursor: move;}
			#tu{position: absolute;left: 0;top: 0;}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="small">
				<img src="img/smallpic.jpg" >
				<span id="mark"></span>
			</div>
			<div id="big">
				<img src="im/bigpic.jpg" id="tu">
			</d

最低0.47元/天解锁文章