Jquery图片查看放大插件

源网站效果

下面是个人最简单的demo

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="dist/jquery.magnify.css" rel="stylesheet">
		<script src="dist/jquery-1.12.4.min.js"></script>
		<script src="dist/jquery.magnify.js"></script>
		<style>
			.imga{
				width: 200px;
			}
		</style>
	</head>
	<body>
		<img class="imga" data-magnify="gallery" data-src="img/jiejue.png" src="img/jiejue.png">
		<img class="imga" data-magnify="gallery" data-src="img/HBuilder.png" src="img/HBuilder.png">
		<img class="imga" data-magnify="gallery" data-src="img/jiejue.png" src="img/jiejue.png">
	</body>
</html>

首先引入css，jquery，js，最简单的demo只需要引入这三个文件如上，图片自选。
插件链接可在上方链接处下载，免费的哦！
元素结构如下。

		<img class="imga" data-magnify="gallery" data-src="img/jiejue.png" src="img/jiejue.png">
		<img class="imga" data-magnify="gallery" data-src="img/HBuilder.png" src="img/HBuilder.png">
		<img class="imga" data-magnify="gallery" data-src="img/jiejue.png" src="img/jiejue.png">
		//也可以
		<a data-magnify="gallery" href="big-1.jpg">
		  <img src="small-1.jpg">
		</a>
		<a data-magnify="gallery" href="big-2.jpg">
		  <img src="small-2.jpg">
		</a>
		<a data-magnify="gallery" href="big-3.jpg">
		  <img src="small-3.jpg">
		</a>

可以看出两种结构稍有不同，但是问题不大，只要记住方案1中data-src、方案2中href为大图片地址，两个方案中中的img标签的src为小图片地址。
在我的方案1中用的是同一个地址，方案2中是不同地址，这个可根据情况选择显示。

如果遇到点击按钮才可查看图片，则用方案2，我们将a标签里面的img标签隐藏且在a标签里面添加一个按钮，或者将a标签本身渲染成按钮样式。如下代码

<div>
	<a data-magnify="gallery" href="img/jiejue.png">
		<button>查看</button>
	 	<img class="imga" src="img/jiejue.png">
	</a>
	<a data-magnify="gallery" href="img/jiejue.png">
				这是a标签内容
		<img class="imga" src="img/jiejue.png">
	</a>
	<a data-magnify="gallery" href="img/jiejue.png">
		<button>查看</button>
		<img class="imga" src="img/jiejue.png">
	</a>
</div>

效果如下
在这里插入图片描述
我们点击对应的按钮或链接，就能打开图片了。

Jquery图片查看放大插件

源网站效果

猜你喜欢