需求分析：

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

viewjs官方网址：https://github.com/fengyuanchen/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>

         <!--请配置好css路径-->

         <link rel="stylesheet" type="text/css" href="viewjs/viewer.min.css" />

         <style type="text/css">

             * {

                 margin: 0;

                 padding: 0;

             }

             img{

                 border: 1px solid #009F95;

             }

         </style>

     </head>

     <body>

         <div>

             <img id="image" src="img/sj.jpg" alt="Picture">

         </div>

         <!--请配置好js路径-->

         <script src="viewjs/viewer.min.js" type="text/javascript" charset="utf-8"></script>

         <script type="text/javascript">

             var viewer = new Viewer(document.getElementById('image'));

         </script>

     </body>

 </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>

         <!--请配置好css路径-->

         <link rel="stylesheet" type="text/css" href="viewjs/viewer.min.css" />

         <style type="text/css">

             * {

                 margin: 0;

                 padding: 0;

             }

             img {

                 border: 1px solid #009F95;

             }

         </style>

     </head>

     <body>

         <div>

             <!--可以对图片样式进行控制-->

             <ul id="images">

                 <li><img src="img/aaa.jpg" alt="Picture"></li>

                 <li><img src="img/product4.png" alt="Picture 2"></li>

                 <li><img src="img/sqbg-icon.png" alt="Picture 3"></li>

             </ul>

         </div>

         <!--请配置好js路径-->

         <script src="viewjs/viewer.min.js" type="text/javascript" charset="utf-8"></script>

         <script type="text/javascript">

             var viewer = new Viewer(document.getElementById('images'));

         </script>

     </body>

 </html>

（1）网页展示效果（未对图片进行样式控制，页面丑。）

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

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

网页中的图片查看器viewjs使用的更多相关文章

  1. Win 10中使用图片查看器

    在Win10中,照片应用提供了时间线.专辑等更丰富的图片管理功能,但是对于基于文件夹打开浏览图片的方式显得笨拙, 放大缩小操作略繁琐,有时还会出现当前文件夹图片加载迟缓导致无法快速浏览的问题. 此时你 ...

  2. Android中的图片查看器

    本案例,使用Eclipse来开发Android2.1版本号的图片查看器. 1)首先,打开Eclipse.新建一个Android2.1版本号的项目ShowTu,打开res/values中文件夹下的str ...

  3. 减少HTTP请求之将图片转成二进制并生成Base64编码,可以在网页中通过url查看图片(大型网站优化技术)

    在网站开发过程中,对于页面的加载效率一般都想尽办法求快.那么,怎么让才能更快呢?减少页面请求 是一个优化页面加载速度很好的方法.上一篇博文我们讲解了 “利用将小图标合成一张背景图来减少HTTP请求”, ...

  4. 如何在pyqt中使用 QGraphicsView 实现图片查看器

    前言 在 PyQt 中可以使用很多方式实现照片查看器,最朴素的做法就是重写 QWidget 的 paintEvent().mouseMoveEvent 等事件,但是如果要在图像上多添加一些形状,那么在 ...

  5. wpf图片查看器，支持鼠标滚动缩放拖拽

    最近项目需要,要用到一个图片查看器,类似于windows自带的图片查看器那样,鼠标滚动可以缩放,可以拖拽图片,于是就写了这个简单的图片查看器. 前台代码: <Window x:Class=&qu ...

  6. 用JQ仿造礼德财富网的图片查看器

    现在就职于一家P2P平台,自然也会关注同行其它网站的前端技术,今天要仿造的是礼德内页的一个图片查看器效果.不过说白了,无论人人贷也好礼德财富也好,很多地方的前端都做的不尽如人意,比如忽略细节.缺乏交互 ...

  7. 基于jQuery的一个简单的图片查看器

    项目中自己diy了一个图片查看器.因为初始代码不是自己的,只是在上面改了一下也没有弄的很漂亮.等以后有时间了在重写一下样式和封装,作为备用的只是积累吧.如果有童鞋有用到,完全可以在此基础上改,比较容易 ...

  8. Objective-C ,ios,iphone开发基础:快速实现一个简单的图片查看器

    新建一个single view 工程: 关闭ARC , 在.xib视图文件上拖放一个UIImageView  两个UIButton ,一个UISlider ,布局如图. 并为他们连线, UIImage ...

  9. Win10默认图片查看器更改

    Win10自带的图片查看器不是很习惯,其背景乌漆嘛黑,宽扁的额头让人想起了黑边火腿肠手机,无法直视.怀念Win7和Win8.1的图片查看器,一个鼠标滚轮缩放自如的酸爽感觉.但却遗憾地发现,并不能直观地 ...

随机推荐

  1. 精简高效CSS系列之二——浮动float

    一.浮动基础知识 假如一个页面上有3个div块,如下排列: 图1:不使用浮动 图2:向右浮动 图2说明了框1脱离了文档流向右移动,直到它的右边缘碰到包含框的右边缘为止. 图3:向左浮动 图3说明了框1 ...

  2. Reverse Engineering the NC ECU (revisited) -- SH7508

    http://forum.miata.net/vb/showthread.php?t=536601 Hey all! About 5 years ago, there was a great thre ...

  3. 预装Windows 8系统机型如何进行一键恢复

    http://support1.lenovo.com.cn/lenovo/wsi/htmls/detail_20131119141246845.html

  4. 经常使用哈希函数的比較及其C语言实现

    基本概念 所谓完美哈希函数.就是指没有冲突的哈希函数.即对随意的 key1 != key2 有h(key1) != h(key2). 设定义域为X,值域为Y, n=|X|,m=|Y|.那么肯定有m&g ...

  5. vs2017与docker

    基本需求 系统 win10 vs2017 docker 步骤 1.开启系统的hyper-v 2. 重启电脑 3.安装docker 下载地址:https://docs.docker.com/docker ...

  6. xcode4.3.2 arc模式下导入非arc的文件 转

    在arc模式下,我们经常会用到非arc的类库,此时我们可以在Compile Sources下对该文件进行编辑加入 -fno-objc-arc   如图中所示,就可以使用非arc的类库了   转:htt ...

  7. CSDN积分规则具体解释--【叶子】

    前记:在CSDN的社区支持板块,常常看到有人提问,为什么有积分却不能下载,此类问题层出不穷,而论坛的各种积分制度说明又非常分散,不便于寻找,为了方便新注冊用户高速了解论坛的积分规则,也为了降低社区支持 ...

  8. UITableView的headerView展开缩放动画

    UITableView的headerView展开缩放动画 效果 源码 https://github.com/YouXianMing/Animations // // HeaderViewTapAnim ...

  9. Ladda 应用提交表单的时候显示loading载入中 包含不同位置，不同效果

    Ladda 应用提交表单的时候显示loading载入中 包含不同位置,不同效果 不同大小.位置,效果,进度条等 演示 XML/HTML Code <article class="exa ...

  10. C++常用排序法、随机数

    C++常用排序法研究 2008-12-25 14:38 首先介绍一个计算时间差的函数,它在<time.h>头文件中定义,于是我们只需这样定义2个变量,再相减就可以计算时间差了. 函数开头加 ...