需求分析：

对于网页中的图片进行连续放大（便于用户清晰查看内容）、缩小，旋转等操作，可以使用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. js异步任务处理方式

    一.es6(es2015)之前:使用原始的callback函数,会陷入回掉地域 this.$http.jsonp('/login', (res) => { this.$http.jsonp('/ ...

  2. Android实现两次按下返回键退出

    @Override public boolean onKeyDown(int keyCode, KeyEvent event) { if(keyCode == KeyEvent.KEYCODE_BAC ...

  3. warning,C4996,sprintf,deprecated,C4996,strcpy,C4996,strcat

    在vs2003, vs2005中用sprintf 会出现warning C4996: 'sprintf' was declared deprecated或warning C4996: 'strcpy' ...

  4. OPC服务器开发浅谈 — 服务器模型(转）

    这里主要讨论的是OPC Data Access 2.0服务器的开发,在掌握了这个最常用的OPC服务器开发之后,对其它类型的OPC服务器,如A&E.HDA等就可以触类旁通了. 一个OPC服务器的 ...

  5. C#中,为什么在值类型后面加问号

    在C#中,声明一个值类型或引用类型的变量,无论是否给这个变量赋初值,该变量都有默认值: 比如声明引用类型变量: string a,其等效于string a = null,string的默认值为null ...

  6. Spring使用环境变量控制配置文件加载(转)

    项目中需要用到很多配置文件,不同环境的配置文件是不一样的,因此如果只用一个配置文件,势必会造成配置文件混乱,这里提供一种利用环境变量控制配置文件加载的方法,如下: 一.配置环境变量 如果是window ...

  7. 修改后无警告全面支持non-ARC以及ARC的OpenUDID

    OpenUDID Open source initiative for a universal and persistent UDID solution for iOS. 首创的给iOS提供设备唯一标 ...

  8. go语言基础之copy的使用

    1.copy的使用 示例: package main //必须有个main包 import "fmt" func main() { srcSlice := []int{1, 2} ...

  9. 20个令人惊叹的音乐应用程序UI，值得收藏

    我们无法想象世界上没有手机.他们已经成为日常生活中不可缺失的一部分.今天的手机可以让你不只是拨打电话和发送消息.它可以让你浏览网页空间,拍照,看书,听音乐等等. 回顾一下互联网,你会看到不同的音乐AP ...

  10. 手把手教你Android手机与BLE终端通信--连接，发送和接收数据

    假设你还没有看上一篇 手把手教你Android手机与BLE终端通信--搜索,你就先看看吧,由于这一篇要接着讲搜索到蓝牙后的连接.和连接后的发送和接收数据. 评论里有非常多人问假设一条信息特别长,怎么不 ...