网页中的图片查看器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 相关文章推荐
从数据结构的角度分析 for each in 比 for in 快的多
Jul 07 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
Jan 26 Javascript
js实现点击添加一个input节点
Dec 05 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
Dec 17 Javascript
JavaScript中eval函数的问题
Jan 31 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
JavaScript requestAnimationFrame动画详解
Sep 14 Javascript
JS函数节流和函数防抖问题分析
Dec 18 Javascript
JavaScript实现微信号随机切换代码
Mar 09 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
vue+spring boot实现校验码功能
May 27 Vue.js
自定义事件解决重复请求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
PHP开发文件系统实例讲解
2006/10/09 PHP
有道JavaScript监听浏览器的问题
2010/06/23 Javascript
jquery的键盘事件修改代码
2011/02/24 Javascript
遍历DOM对象内的元素属性示例代码
2014/02/08 Javascript
Javascript排序算法之计数排序的实例
2014/04/05 Javascript
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
2015/08/17 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
JavaScript ES6的新特性使用新方法定义Class
2016/06/28 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
jQuery 的 ready()的纯js替代方法
2016/11/20 Javascript
webpack踩坑之路图片的路径与打包
2017/09/05 Javascript
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
微信小程序 冒泡事件原理解析
2019/09/27 Javascript
微信小程序基于高德地图查找位置并显示文字
2019/10/30 Javascript
webpack中的模式(mode)使用详解
2020/02/20 Javascript
vue 实现tab切换保持数据状态
2020/07/21 Javascript
Python编程产生非均匀随机数的几种方法代码分享
2017/12/13 Python
解决Python 中英文混输格式对齐的问题
2018/07/16 Python
Django的models中on_delete参数详解
2019/07/16 Python
Python turtle画图库&amp;&amp;画姓名实例
2020/01/19 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
python如何调用百度识图api
2020/09/29 Python
html5中localStorage本地存储的简单使用
2017/06/16 HTML / CSS
eBay德国站:eBay.de
2017/09/14 全球购物
Hunkemöller瑞士网上商店:欧洲最大的内衣品牌之一
2018/12/03 全球购物
碧欧泉法国官网:Biotherm法国
2019/10/23 全球购物
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
对象的序列化(serialization)类是面向流的,应如何将对象写入到随机存取文件中
2015/06/22 面试题
网络工程师个人的自我评价范文
2013/10/01 职场文书
玩具公司的创业计划书
2013/12/31 职场文书
幼儿园家长评语大全
2014/04/16 职场文书
物流专业自荐信
2014/05/23 职场文书
2014最新党员违纪检讨书
2014/10/12 职场文书
同意报考公务员证明
2015/06/17 职场文书
一小时迅速入门Mybatis之bind与多数据源支持 Java API
2021/09/15 Javascript