前端图片查看预览插件Viewer.js使用方法记录总结

灰太狼 2021-11-22 11:56 2034阅读 0赞

##                前端图片查看预览插件Viewer.js使用方法记录总结 ##

# #

**一、简介**

Viewer JS 是一个前端的图片查看组件。支持图片放大、缩小，全屏、旋转、模态窗打开等功能。高效，简洁，易于学习使用。

**二、下载**

1.1、JS 版本：[https://github.com/fengyuanchen/viewerjs][https_github.com_fengyuanchen_viewerjs]

1.2、 JS 版本 Demo： [https://fengyuanchen.github.io/viewerjs/][https_fengyuanchen.github.io_viewerjs]

2.1、JQuery 版本： [https://github.com/fengyuanchen/jquery-viewer][https_github.com_fengyuanchen_jquery-viewer]

2.2、 JQuery 版本 Demo： [https://fengyuanchen.github.io/jquery-viewer/][https_fengyuanchen.github.io_jquery-viewer]

**三、使用方法 --- 以JS版作示例**

1、引入 viewer.js and viewer.css

<link href="viewer.css" rel="stylesheet">
    <script src="viewer.js" type="text/javascript"></script>
    <style type="text/css">
    	ul > li{
    		cursor: zoom-in; 
    	}
    </style>

2、Html 代码

3、JS 代码

4、实现效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhSGFfU2ly_size_16_color_FFFFFF_t_70][]

[https_github.com_fengyuanchen_viewerjs]: https://github.com/fengyuanchen/viewerjs
[https_fengyuanchen.github.io_viewerjs]: https://fengyuanchen.github.io/viewerjs/
[https_github.com_fengyuanchen_jquery-viewer]: https://github.com/fengyuanchen/jquery-viewer
[https_fengyuanchen.github.io_jquery-viewer]: https://fengyuanchen.github.io/jquery-viewer/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhSGFfU2ly_size_16_color_FFFFFF_t_70]: /images/20211122/5e888e47ec8e4227b67aafbd0f4a1b1e.png