欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

图片查看器viewer

程序员文章站 2022-03-11 09:10:10
最近在研究图片查看器,支持图片预览上一张,下一张,旋转,放大,缩小,拖拽。发现大方美观的还是很少,bootstrap中有个插件叫inputfile.js,这个插件的图片预览没有旋转功能,也没有放大和缩小功能,自己想在此基础上更改,但是发现五六千行的JavaScript不是这么简单就能读懂的,所以自己重新找了一个叫做viewer。这个插件的效果图如下:......

最近在研究图片查看器,支持图片预览上一张,下一张,旋转,放大,缩小,拖拽

发现大方美观的还是很少,bootstrap中有个插件叫inputfile.js,这个插件的图片预览没有旋转功能,也没有放大和缩小功能,自己想在此基础上更改,但是发现五六千行的JavaScript不是这么简单就能读懂的,所以自己重新找了一个叫做viewer。

这个插件的效果图如下:

图片查看器viewer

 

 

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="utf-8">
<title>JS/jQuery图片查看器viewer.js演示-默认效果_dowebok</title>
<link rel="stylesheet" href="css/viewer.min.css">
<style>
* { margin: 0; padding: 0;}
#dowebok { width: 700px; 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>
<h1>默认效果</h1>

<ul id="dowebok">
	<li><img data-original="img/tibet-1.jpg" src="img/thumbnails/tibet-1 (2).jpg" alt="图片1"></li>
	
	<li><img data-original="img/tibet-3.jpg" src="img/thumbnails/tibet-1 (4).jpg" alt="图片3"></li>
	<li><img data-original="img/tibet-4.jpg" src="img/thumbnails/tibet-1 (5).jpg" alt="图片4"></li>
	<li><img data-original="img/tibet-5.jpg" src="img/thumbnails/tibet-1 (6).jpg" alt="图片5"></li>
	
</ul>

<script src="js/viewer.min.js"></script>
<script>
var viewer = new Viewer(document.getElementById('dowebok'), {
	url: 'data-original'
});
</script>

</body>
</html>

预览效果如下:

图片查看器viewer

 

需要这个demo的可以私信我。

 

本文地址:https://blog.csdn.net/qq_44859233/article/details/111121854