需求分析：

对于网页中的图片进行连续放大（便于用户清晰查看内容）、缩小，旋转等操作，可以使用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. 华为S5300系列交换机V100R006SPH017VRP热补丁

    S5300_V100R006SPH017.pat 附件: 链接:https://pan.baidu.com/s/16lrNMykatXR3_5xKBc2zuw  密码:rt1l

  2. @selector 如何调用在另一个类中的静态函数？

    可以在同一个类的methodName这个函数中再调用另一个类中的静态方法

  3. Java heap space 解决方法（转）

      因为程序要从数据读取近10W行记录处理,当读到9W的时候就出现 java.lang.OutOfMemoryError: Java heap space 这样的错误. 在网上一查可能是JAVA的堆栈 ...

  4. window与linux文件传输工具

    window与linux文件传输工具 [一般用于SecureCRT ssh中使用] 法一:直接用yum安装lrzsz(推荐) yum install lrzsz -y 注意:rhel安装完系统后 直接 ...

  5. JDBC进阶之PreparedStatement执行SQL语句(MySQL)

    一.什么是PreparedStatement           参阅Java API文档,我们可以知道,PreparedStatement是Statement的子接口(如图所示),表示预编译的 SQ ...

  6. 最近在研究FFmpeg编解码

    好几年没上CNBLOGS了, 最近在研究FFmpeg编解码,一个人研究感到很寂寞,所以想通过博客来和大家分享和交流,呵呵. 最近研究的主题是: ANDROID手机同屏技术: 需要用到ANDROID截屏 ...

  7. Jersey 框架取到所有参数的方法

    /**  * 测试post取参数  *   * @return  */ @POST @Consumes("application/x-www-form-urlencoded") p ...

  8. [MAC OS] NSButton tag 获取

    @IBAction func switchContentLayout(_ sender: Any) { let button : NSButton = sender as! NSButton;}

  9. memcpy实现

    typedef unsigned int size_t; void * my_memcpy ( void *dest, const void *src, size_t num ) { void* re ...

  10. Java:字符串类简单的正则表达式

    class Test { public static void main(String[] args) { String str = "xia..as....yuan.com"; ...