Viewer.js –JS/jQuery图片查看器-实现多张图片预览组件
子车海
参考和下载：http://www.dowebok.com/192.html
- 支持移动设备触摸事件
- 支持响应式
- 支持放大/缩小
- 支持旋转（类似微博的图片旋转）
- 支持水平/垂直翻转
- 支持图片移动
- 支持键盘
- 支持全屏幻灯片模式（可做屏保）
- 支持缩略图
- 支持标题显示
- 支持多种自定义事件
Viewer.js 提供了纯 JS 版本和 jQuery 版本，您可以任意选择。
GitHub 地址：
JSP源码片段：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix ="c" %>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="${siteUrl }/css/viewer.min.css">
<style>
* { margin: 0; padding: 0;}
#dowebok { margin: 0 auto; font-size: 0;}
#dowebok li { display: inline-block; width: 32%; margin-left: 1%; padding-top: 1%;}
#dowebok li img { width: 100%;}
</style>
</head>
<body>
<ul id="dowebok">
<c:forEach var="item" items="${attachList}" varStatus="i">
<li><img data-original="${fileUrl}${item.attachPath}" src="${fileUrl}${item.attachPath}" alt="${item.name}"></li>
</c:forEach>
</ul>
<script src="${siteUrl }/lib/jquery-1.7.2.min.js"></script>
<script src="${siteUrl }/js/viewer-jquery.min.js"></script>
<script>
$(function() {
$('#dowebok').viewer({
url: 'data-original',
});
});
</script>
</body>
</html>
类似资料：