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

需求分析：

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

viewjs官方网址：

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

下面做2个简单的示例：

1、示例一：单一图片

  1   <!  DOCTYPE html  > 
  2   <  html   lang  ="zh"  > 
  3  
  4       <  head  > 
  5           <  meta   charset  ="UTF-8"   /> 
  6           <  meta   name  ="viewport"   content  ="width=device-width, initial-scale=1.0"   /> 
  7           <  meta   http-equiv  ="X-UA-Compatible"   content  ="ie=edge"   /> 
  8           <  title  > 网页中的图片查看器viewjs使用 </  title  > 
  9           <!--  请配置好css路径  --> 
 10           <  link   rel  ="stylesheet"   type  ="text/css"   href  ="viewjs/viewer.min.css"   /> 
 11           <  style   type  ="text/css"  > 
 12               *   { 
 13                   margin  :   0  ; 
 14                   padding  :   0  ; 
 15               } 
 16               img  { 
 17                   border  :   1px solid #009F95  ; 
 18               } 
 19           </  style  > 
 20       </  head  > 
 21  
 22       <  body  > 
 23           <  div  > 
 24               <  img   id  ="image"   src  ="img/sj.jpg"   alt  ="Picture"  > 
 25           </  div  > 
 26           <!--  请配置好js路径  --> 
 27           <  script   src  ="viewjs/viewer.min.js"   type  ="text/javascript"   charset  ="utf-8"  ></  script  > 
 28           <  script   type  ="text/javascript"  > 
 29               var   viewer   =   new   Viewer(document.getElementById(  '  image  '  ));
  30           </  script  > 
 31       </  body  > 
 32  
 33   </  html  >  

查看更多关于网页中的图片查看器viewjs使用的详细内容...