需求分析：

对于网页中的图片进行连续放大（便于用户清晰查看内容）、缩小，旋转等操作，可以使用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. 长城小主机GW1等型号进BIOS的设置方法

    主板型号 1.进BIOS办法 2.BIOS下设置U盘启动 3.主板设置上电启动 4.主要是否具有快速U盘启动功能 5.定时开机设置 945GMS Ctrl+Alt+F1(注意:自检响铃后,再按) 在B ...

  2. STLink download/debug interface for Linux.

    http://arm-utilities.googlecode.com/svn-history/r47/trunk/stlink-download/stlink-download.c /* STLin ...

  3. iptables详解与Centos7 关闭防火墙

    http://www.cnblogs.com/metoy/p/4320813.html CentOS 7.0默认使用的是firewall作为防火墙,使用iptables必须重新设置一下 1.直接关闭防 ...

  4. linux下查找nginx里的nginx.conf文件地址方法

    在控制台输入nginx -t 回车即可看到所在目录,直接vi 目录 即可查看

  5. spring MVC 与 struts 的区别

    当初选框架的时候目的比较单纯---springmvc支持rest,小生对restful url由衷的喜欢 不用不知道一用就发现开发效率确实比struts2高 我们用struts2时采用的传统的配置文件 ...

  6. Java读取properties配置文件时，中文乱码解决方法

    public static String getConfig(String key) { Properties pros = new Properties(); String value = &quo ...

  7. java静态初始化数据

    1.通过静态成员变量和静态方法组合(比较单一) public class A{ private static String t=getInit(); private static String get ...

  8. MICS：副本和纠删码混合存储系统

    摘要 云存储系统的三个指标: 高可靠性,低存储开销,高读写性能. 这三个指标是没有办法同一时候满足的,许多时候须要进行tradeoff. 副本系统和纠删码是两种在存储系统中广泛使用的策略,它们在保证高 ...

  9. 用java解析在OpenStreetMap上下载的地图数据（SAX版，适合比较大的xml文件）

    java程序如下: package gao.map.preprocess; import java.io.BufferedWriter; import java.io.File; import jav ...

  10. CoreAudio实现录音播音和扬声器听筒模式的切换

    本例子使用Core Audio实现类似于微信的音频对讲功能,可以录音和播放并且实现了听筒模式和扬声器模式的切换.录音主要使用AVAudioRecorder类来实现录音功能,播放则使用AVAudioPl ...