需求分析：

对于网页中的图片进行连续放大（便于用户清晰查看内容）、缩小，旋转等操作，可以使用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. oracle case when exists()

    用法如下: select case when exists(select 1 from t_test c where c.name = 'zhangsan'     and c.age = 23 ) ...

  2. oracle存储过程获取异常信息码和异常信息

    oracle存储过程,可以通过sqlcode 获取异常编码.通过sqlerrm获取异常信息. 例子: create or replace procedure write2blob(p_id in nu ...

  3. jQuery制作水平多级下拉菜单

    本篇体验使用jQuery制作水平的.多级的.下拉菜单. 下拉菜单的html部分如下. <body> <nav class="main-nav"> <u ...

  4. arcgis新版本增加的功能

    1.导出拓扑错误 2.应用图层的符号设置 3.创建 SQLite 数据库 4.最小包围体 5.图形缓冲 6.按属性分割

  5. https跳转到http的过程在IE6中存在BUG(Bea-090475)

    前段时间做OA系统的https的安全登录功能(以前登录是采用的一般的http方式,后因为安全性考虑需要改成https的方式)在本机测试完全通过. 可是近期同事发现在测试环境下用IE6访问会出现不能访问 ...

  6. 偏执却管用的10条Java编程技巧

    本文由 ImportNew - LynnShaw 翻译自 javacodegeeks.欢迎加入翻译小组.转载请见文末要求. 经过一段时间的编码(咦,我已经经历了将近20年的编程生涯,快乐的日子总是过得 ...

  7. synchronized与lock，哪个效率更高

    Java在一开始就提供了synchronized关键字,用于多线程之间的同步.它使用简便,不会出现拿锁之后不归还的情况,可以避免一些编程错误. 而jdk5时提供的concurrent包里,有一个Loc ...

  8. 项目bug的修正

    这几个月来,大部分业余时间,都花在阅读软件工程和编译原理方面的书籍上了.软件工程方面的书,包括软件需求.风险管理.敏捷建模,系统设计,软件项目管理,还有一些类似于的沉思录书籍等. 在这些书中,都只是讲 ...

  9. [转]linux sort 命令详解

    原文网址:http://www.cnblogs.com/51linux/archive/2012/05/23/2515299.html 1 sort的工作原理 sort将文件的每一行作为一个单位,相互 ...

  10. c# winform编程之多线程ui界面资源修改总结篇【转】

    c# winform编程之多线程ui界面资源修改总结篇 单线程的winfom程序中,设置一个控件的值是很easy的事情,直接 this.TextBox1.value = "Hello Wor ...