给自己网站添加图片预览 大小缩放功能

2020/03/19 14:37 Web 极四维博客 1284 0
😂 这篇文章最后更新于1499天前，您需要注意相关的内容是否还可用。

网站没有图片放大预览功能，当自己在文章中插入大尺寸图片时，在网页看图片细节会看不清，这种情况要不右键保存图片到本地，要不复制图片链接在新窗口打开才能看到图片中细节。其实只需要小小的js插件即可实现图片预览效果。

今天介绍的插件Viewer.js，效果可尝试下图。点击图片预览，鼠标滚轮或键盘方向键上下可放大缩小，左右方向键可切换图片，ESC或点击X键退出预览，并且支持幻灯片播放。

实现方法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/viewer.min.css">
		<script src="js/viewer.min.js"></script>
	</head>
	<body>
		<img src="./img/tibet-1.jpg" alt="图片1">
		<img src="./img/tibet-2.jpg" alt="图片2">
	</body>
	<script>
		// 这里选创建浏览对象所在范围的元素，body全通用：
		// 本页采用的是document.getElementsByClassName("article-content")[0])
		// 即根据文章内容class获取文章内容元素 然对其进行创建预览对象
		var viewer = new Viewer(document.body);
	</script>
</html>

其实也就是简单调用其js与css，然后利用new Viewer()调用即可。JQ版本调用为：

$('#id').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回调函数，具体查看演示

配置也很简单，把参数配置写在new Viewer第二个参数中即可：

		new Viewer(document.body, {
			url: 'data-original',
			button: true,
			navbar: true
		});

下载：点击下载Viewer.js

声明：本文由极四维博客发布，如需转载请注明出处。