网页中的图片查看器viewjs使用方法

需求分析：

对于网页中的图片进行连续放大（便于用户清晰查看内容)、缩小，旋转等操作，可以使用viewjs图片查看器插件实现。

viewjs官方网址：https://github。com/fengyuchen/viewerjs

具体使用方法请参照官网说明。

下面做2个简单的示例：

1、示例一：单一图片

！DOCTYPE html html lang=' zh ' 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网页中的图片查看器viewjs使用/title！-请配置好钢性铸铁路径- link rel='样式表type=' text/CSS ' href=' view js/viewer。量滴CSS ' rel='外部无跟随' rel='外部无跟随'/style type=' text/CSS ' * { margin 3360 0；padd : 0；} img{ border: 1px固体# 009 f95 }/style/head body div img id=' image ' src=' http : img/SJ。jpg ' alt=' Picture '/div！-请配置好射流研究…路径-script src=' http : Viewer js/Viewer。量滴js ' type=' text/JavaScript ' charset=' utf-8 '/script script type=' text/JavaScript ' var Viewer=new Viewer(文档。getelementbyid(' image ')；/脚本/正文/html效果：

(1)网页显示：

(2)点击图片后：

2、示例二：多个图片同时展示

！DOCTYPE html html lang=' zh ' 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网页中的图片查看器viewjs使用/title！-请配置好钢性铸铁路径- link rel='样式表type=' text/CSS ' href=' view js/viewer。量滴CSS ' rel='外部无跟随' rel='外部无跟随'/style type=' text/CSS ' * { margin 3360 0；padd : 0；} img { border: 1px固体# 009F95}/样式/头体div！-可以对图片样式进行控制-ul id=' images ' liimg src=' http : img/AAA。jpg ' alt=' Picture '/Li liimg src=' http : img/product 4。jpg ' alt='图片2 '/Li liimg src=' http : img/sqbg-icon。jpg ' alt='图片3 '/Li/ul/div！-请配置好射流研究…路径-script src=' http : Viewer js/Viewer。量滴js ' type=' text/JavaScript ' charset=' utf-8 '/script script type=' text/JavaScript ' var Viewer=new Viewer(文档。getelementbyid(' images ')；/脚本/正文/html(1)网页展示效果（未对图片进行样式控制，页面丑。)

(2)点击任何一个图片，可对图片进行各种查看操作。

总结：viewjs插件可以对网页中的图片进行各种查看操作，尤其可以用于用户想连续方法查看图片等情景。其他viewjs的方法后续会

以上这篇网页中的图片查看器viewjs使用方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。