网页中的图片查看器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 相关文章推荐
IE中createElement需要注意的一个问题
Jul 13 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
Oct 22 Javascript
浅析JavaScript中的类型和对象
Nov 29 Javascript
JQuery解析HTML、JSON和XML实例详解
Mar 29 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
Jun 04 Javascript
JavaScript对HTML DOM使用EventListener进行操作
Oct 21 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
Jun 13 Javascript
深入分析javascript中的错误处理机制
Jul 17 Javascript
Vue表单验证插件Vue Validator使用方法详解
Apr 07 Javascript
最实用的JS数组函数整理
Dec 05 Javascript
Angular利用HTTP POST下载流文件的步骤记录
Jul 26 Javascript
vue之封装多个组件调用同一接口的案例
Aug 11 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
使用PHPMyAdmin修复论坛数据库的图文方法
2012/01/09 PHP
PHP获取数组中某元素的位置及array_keys函数应用
2013/01/29 PHP
PHP中使用sleep函数实现定时任务实例分享
2014/08/21 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
完整显示当前日期和时间的JS代码
2007/09/17 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
javascript使用isNaN()函数判断变量是否为数字
2013/09/21 Javascript
javascript对下拉列表框(select)的操作实例讲解
2013/11/29 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
2014/03/18 Javascript
基于javascript实现listbox左右移动
2016/01/29 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
移动端效果之Swiper详解
2017/10/09 Javascript
vue路由缓存的几种实现方式小结
2020/02/02 Javascript
python利用elaphe制作二维条形码实现代码
2012/05/25 Python
跟老齐学Python之玩转字符串(1)
2014/09/14 Python
Python中用于检查英文字母大写的isupper()方法
2015/05/19 Python
numpy排序与集合运算用法示例
2017/12/15 Python
使用pandas模块读取csv文件和excel表格,并用matplotlib画图的方法
2018/06/22 Python
10 分钟快速入门 Python3的教程
2019/01/29 Python
更新pip3与pyttsx3文字语音转换的实现方法
2019/08/08 Python
Python如何获取文件路径/目录
2020/09/22 Python
详解Django中异步任务之django-celery
2020/11/05 Python
Peter Alexander新西兰站:澳大利亚领先的睡衣设计师品牌
2016/12/10 全球购物
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
物业经理求职自我评价
2013/09/22 职场文书
双方协议书
2014/04/22 职场文书
小学语文课后反思精选
2014/04/25 职场文书
英语演讲稿3分钟
2014/04/29 职场文书
成立公司计划书
2014/05/07 职场文书
个人授权委托书范本格式
2014/10/12 职场文书
2015年班长个人工作总结
2015/04/03 职场文书
2015年小学生国庆节演讲稿
2015/07/30 职场文书
mysql对于模糊查询like的一些汇总
2021/05/09 MySQL
永中文档在线转换预览基于nginx配置部署方案
2022/06/10 Servers