您的位置：首页 > Web前端 > JQuery

JQuery实现图片点击放大

2018-01-18 14:06 477 查看

这里使用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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 图片放大 BootStrap实现图片放大图片点击放大 JS实现图片放大

相关文章推荐

新的分享

章节导航