JQuery实现图片点击放大

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/fanxiangru999/article/details/79095470

这里使用zoomify,先看实现效果:


Gif动态图分辨率太低,实际效果鼠标防止图片上时会变为放大镜,图片放大时会变为缩小镜。。。。

实现只需要三个步骤:

1、需要引入三个文件:zoomify.css、zoomify.js、jquery-1.11.3.min.js;

2、引入图片:

<body style="text-align:center">
<div >
	<img style="height: 150px;"
		src="http://127.0.0.1:8080/plat-service/images/pages/licpage/1.png" />
	<img style="height: 150px;"
		src="http://127.0.0.1:8080/plat-service/images/pages/licpage/2.jpg" />
	<img style="height: 150px;"
		src="http://127.0.0.1:8080/plat-service/images/pages/licpage/3.jpg" />
	<img style="height: 150px;"
		src="http://127.0.0.1:8080/plat-service/images/pages/licpage/4.jpg" />
</div>
3、调用js方法:

$('img').zoomify();
4、我的源码:

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
<html>
<head>
<title>demo</title>
</head>
<link href="http://127.0.0.1:8080/plat-service/css/common/bootstrap/zoomify.css"
	rel='stylesheet' type='text/css' />
<script type="text/javascript"
	src="http://127.0.0.1:8080/plat-service/js/common/bootstrap/jquery-1.11.3.min.js"></script>
<script type="text/javascript"
	src="http://127.0.0.1:8080/plat-service/js/common/bootstrap/zoomify.js"></script>
<script type="text/javascript">
	$(function() {
		$('img').zoomify();
	});
</script>
</head>

<body style="text-align:center">
<div >
	<img style="height: 150px;"
		src="http://127.0.0.1:8080/plat-service/images/pages/licpage/1.png" />
	<img style="height: 150px;"
		src="http://127.0.0.1:8080/plat-service/images/pages/licpage/2.jpg" />
	<img style="height: 150px;"
		src="http://127.0.0.1:8080/plat-service/images/pages/licpage/3.jpg" />
	<img style="height: 150px;"
		src="http://127.0.0.1:8080/plat-service/images/pages/licpage/4.jpg" />
</div>

</body>
</html>
</html>




展开阅读全文

没有更多推荐了,返回首页