js版 — viewer.js github github地址
jq版 — jquery-viewer github地址
一款基于jq的pc、移动端的图片预览,缩放插件,
1、html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="jquery-3.3.1.js"></script>
<!-- jQuery is required -->
<script src="viewer.js"></script>
<!-- Viewer.js is required -->
<link href="viewer.css" rel="stylesheet" />
<script src="jquery-viewer.js"></script>
<style>
ul,
li {
list-style: none;
}
ul {
display: block;
}
ul > li {
display: inline-block;
}
img {
width: 200px;
}
</style>
</head>
<body>
<div>
<ul>
<li>
<img
class="images"
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546495112355&di=05f887ba4bc6d54854183a31d76fd1df&imgtype=0&src=http%3A%2F%2Fpic2.ooopic.com%2F12%2F40%2F58%2F18bOOOPIC9c.jpg"
alt="Picture 1"
/>
<img
class="images"
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546495112354&di=5ae6b00f4a2dd2f4398c167b6c387528&imgtype=0&src=http%3A%2F%2Fwx4.sinaimg.cn%2Flarge%2F006VtoKely1fpx4ijwzk0j30dw0dwju4.jpg"
alt="Picture 2"
/>
</li>
<li>
<img
class="images"
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546495112354&di=5ae6b00f4a2dd2f4398c167b6c387528&imgtype=0&src=http%3A%2F%2Fwx4.sinaimg.cn%2Flarge%2F006VtoKely1fpx4ijwzk0j30dw0dwju4.jpg"
alt="Picture 2"
/>
</li>
<li>
<img
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546495112354&di=a7a8e27620b4122803306a91ff6a6c1e&imgtype=0&src=http%3A%2F%2Ftupian.qqjay.com%2Fu%2F2017%2F1221%2F7_143642_9.jpg"
alt="Picture 3"
/>
</li>
</ul>
<hr />
<h3>群组浏览</h3>
<ul class="preview">
<li>
<img
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546495112355&di=05f887ba4bc6d54854183a31d76fd1df&imgtype=0&src=http%3A%2F%2Fpic2.ooopic.com%2F12%2F40%2F58%2F18bOOOPIC9c.jpg"
alt="Picture 1"
/>
<img
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546495112354&di=5ae6b00f4a2dd2f4398c167b6c387528&imgtype=0&src=http%3A%2F%2Fwx4.sinaimg.cn%2Flarge%2F006VtoKely1fpx4ijwzk0j30dw0dwju4.jpg"
alt="Picture 2"
/>
</li>
<li>
<img
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546495112354&di=5ae6b00f4a2dd2f4398c167b6c387528&imgtype=0&src=http%3A%2F%2Fwx4.sinaimg.cn%2Flarge%2F006VtoKely1fpx4ijwzk0j30dw0dwju4.jpg"
alt="Picture 2"
/>
</li>
<li>
<img
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546495112354&di=a7a8e27620b4122803306a91ff6a6c1e&imgtype=0&src=http%3A%2F%2Ftupian.qqjay.com%2Fu%2F2017%2F1221%2F7_143642_9.jpg"
alt="Picture 3"
/>
</li>
</ul>
</div>
<script>
// View a list of images
$('.images').viewer()
$('.preview').viewer()
</script>
</body>
</html>
viewer文档简单说明
名称 | 类型 | 默认值 | 说明 |
---|---|---|---|
inline | 布尔值 | false | 启用 inline 模式 |
button | 布尔值 | true | 显示右上角关闭按钮(jQuery 版本无效) |
navbar | 布尔值/整型 | true | 显示缩略图导航 |
title | 布尔值/整型 | true | 显示当前图片的标题(现实 alt 属性及图片尺寸) |
toolbar | 布尔值/整型 | true | 显示工具栏 |
tooltip | 布尔值 | true | 显示缩放百分比 |
movable | 布尔值 | true | 图片是否可移动 |
zoomable | 布尔值 | true | 图片是否可缩放 |
rotatable | 布尔值 | true | 图片是否可旋转 |
scalable | 布尔值 | true | 图片是否可翻转 |
transition | 布尔值 | true | 使用 CSS3 过度 |
fullscreen | 布尔值 | true | 播放时是否全屏 |
keyboard | 布尔值 | true | 是否支持键盘 |
interval | 整型 | 5000 | 播放间隔,单位为毫秒 |
zoomRatio | 浮点型 | 0.1 | 鼠标滚动时的缩放比例 |
minZoomRatio | 浮点型 | 0.01 | 最小缩放比例 |
maxZoomRatio | 数字 | 100 | 最大缩放比例 |
zIndex | 数字 | 2015 | 设置图片查看器 modal 模式时的 z-index |
zIndexInline | 数字 | 0 | 设置图片查看器 inline 模式时的 z-index |
url | 字符串/函数 | src | 设置大图片的 url |
build | 函数 | null | 回调函数,具体查看演示 |
built | 函数 | null | 回调函数,具体查看演示 |
show | 函数 | null | 回调函数,具体查看演示 |
shown | 函数 | null | 回调函数,具体查看演示 |
hide | 函数 | null | 回调函数,具体查看演示 |
hidden | 函数 | null | 回调函数,具体查看演示 |
view | 函数 | null | 回调函数,具体查看演示 |
viewed | 函数 | null | 回调函数,具体查看演示 |