图片放大镜效果_放大镜图片-CSDN博客

本文链接：https://blog.csdn.net/qq_36779082/article/details/117197455

新建一个html文件，命令为test.html,内容如下：

<!doctype html>
<html lang="en">
	<head>
		<title>测试文档</title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			a{
				text-decoration:none
			}
			.zoomdiv{
				z-index:100;
				position:absolute;
				top:0px;
				left:0px;
				width:150px;
				height:150px;
				background:#ffffff;
				border:1px solid #CCCCCC;
				display:none;
				text-align:center;
				overflow:hidden;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="jqueryzoom.css">
	</head>
	<body>
		<div id="preview"> 
			<span class="jqzoom" style="display:inline-block;/*这个属性一定要，不然放大镜就跑外面去了*/">
				<img id="bigfrom" style='width:1200px' jqimg="12.png" src="12.png" />
			</span> 
		</div>
	</body>
	<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="jquery.mousewheel.js"></script>
	<script type="text/javascript" src="jqueryzoom.js"></script>
	<script type="text/javascript">
		$(function(){
			$(".jqzoom").jqueryzoom({
				xzoom:300,
				yzoom:300,
				offset:0,
				position:"right",
				magnify:4,
				lens:1
			});
		});
		document.getElementById('bigfrom').onmousemove=function(e){
			console.log(1);
		};
	</script>
</html>

其中需要的三个js文件可以在网上自行搜索下载：

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="jqueryzoom.js"></script>

效果如图：
在这里插入图片描述