网页中的图片查看器viewjs使用方法


Posted in Javascript onJuly 11, 2017

需求分析:

对于网页中的图片进行连续放大(便于用户清晰查看内容)、缩小,旋转等操作,可以使用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" rel="external nofollow" rel="external nofollow" />
  <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)网页显示:

网页中的图片查看器viewjs使用方法

(2)点击图片后:

网页中的图片查看器viewjs使用方法

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" rel="external nofollow" rel="external nofollow" />
  <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.jpg" alt="Picture 2"></li>
    <li><img src="img/sqbg-icon.jpg" 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)网页展示效果(未对图片进行样式控制,页面丑。)

网页中的图片查看器viewjs使用方法

(2)点击任何一个图片,可对图片进行各种查看操作。

网页中的图片查看器viewjs使用方法

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

以上这篇网页中的图片查看器viewjs使用方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery next nextAll nextUntil siblings的区别介绍
Oct 05 Javascript
编写高效jQuery代码的4个原则和5个技巧
Apr 24 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
May 04 Javascript
Js实现网页键盘控制翻页的方法
Oct 30 Javascript
JavaScript操作Cookie详解
Feb 28 Javascript
jQuery中trigger()与bind()用法分析
Dec 18 Javascript
Underscore源码分析
Dec 30 Javascript
JavaScript检测原始值、引用值、属性
Jun 20 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
Sep 06 Javascript
高性能的javascript之加载顺序与执行原理篇
Jan 14 Javascript
基于vue实现一个神奇的动态按钮效果
May 15 Javascript
Python机器学习之决策树和随机森林
Jul 15 Javascript
自定义事件解决重复请求BUG的问题
Jul 11 #Javascript
关于js中的鼠标事件总结
Jul 11 #Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 #Javascript
angular学习之从零搭建一个angular4.0项目
Jul 10 #Javascript
在Vue中使用echarts的实例代码(3种图)
Jul 10 #Javascript
jquery.validate.js 多个相同name的处理方式
Jul 10 #jQuery
Angular2生命周期钩子函数的详细介绍
Jul 10 #Javascript
You might like
天使彦史上最神还原,性别曝光的那一刻,百万网友恋爱了
2020/03/02 国漫
千呼万唤始出来,DOTA2勇士令状不朽宝藏Ⅱ现已推出
2020/08/25 DOTA
php中将一段数据存到一个txt文件中并显示其内容
2014/08/15 PHP
Document对象内容集合(比较全)
2010/09/06 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
2014/10/10 Javascript
javascript使用call调用微信API
2014/12/15 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
JS制作手机端自适应缩放显示
2015/06/11 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
2016/05/07 Javascript
JavaScript代码里的判断小结
2016/08/22 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
2017/05/24 Javascript
vue iView 上传组件之手动上传功能
2018/03/16 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
2019/05/16 Javascript
你或许不知道的一些npm实用技巧
2019/07/04 Javascript
[03:31]DOTA2英雄基础教程 大地之灵
2013/12/17 DOTA
[01:19:34]2014 DOTA2国际邀请赛中国区预选赛 New Element VS Dream time
2014/05/22 DOTA
[53:36]Liquid vs VP Supermajor决赛 BO 第三场 6.10
2018/07/05 DOTA
Python的Urllib库的基本使用教程
2015/04/30 Python
Python与Java间Socket通信实例代码
2017/03/06 Python
Python中使用haystack实现django全文检索搜索引擎功能
2017/08/26 Python
python删除本地夹里重复文件的方法
2020/11/19 Python
python绘制散点图并标记序号的方法
2018/12/11 Python
使用pycharm设置控制台不换行的操作方法
2019/01/19 Python
python+selenium实现简历自动刷新的示例代码
2019/05/20 Python
Python-for循环的内部机制
2020/06/12 Python
Python + opencv对拍照得到的图片进行背景去除的实现方法
2020/11/18 Python
德国BA保镖药房中文网:Bodyguard Apotheke
2021/03/09 全球购物
市场营销专业毕业生自荐信
2013/11/02 职场文书
毕业生的求职信范文分享
2013/12/04 职场文书
学校教师安全责任书
2014/07/23 职场文书
中秋节主题班会
2015/08/14 职场文书
《草船借箭》教学反思
2016/02/23 职场文书
Python3 使用pip安装git并获取Yahoo金融数据的操作
2021/04/08 Python
MySQL中dd::columns表结构转table过程及应用详解
2022/09/23 MySQL