网页中的图片查看器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 相关文章推荐
js类中的公有变量和私有变量
Jul 24 Javascript
JavaScript开发规范要求(规范化代码)
Aug 16 Javascript
JavaScript中的console.profile()函数详细介绍
Dec 29 Javascript
bootstrapValidator自定验证方法写法
Dec 01 Javascript
常用的js方法合集
Mar 10 Javascript
Angular @HostBinding()和@HostListener()用法
Mar 05 Javascript
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
详解redux异步操作实践
Aug 15 Javascript
vue 指令之气泡提示效果的实现代码
Oct 18 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
Sep 11 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
Oct 27 Javascript
TypeScript 内置高级类型编程示例
Sep 23 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
如何对PHP程序中的常见漏洞进行攻击(下)
2006/10/09 PHP
探讨:parse url解析URL,返回其组成部分
2013/06/14 PHP
PHP处理数组和XML之间的互相转换
2016/06/02 PHP
PHP的PDO事务与自动提交
2019/01/24 PHP
php和nginx交互实例讲解
2019/09/24 PHP
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
js 优化次数过多的循环 考虑到性能问题
2011/03/05 Javascript
跟我学习javascript的作用域与作用域链
2015/11/19 Javascript
基于Javascript实现弹出页面效果
2016/01/01 Javascript
JavaScript中setter和getter方法介绍
2016/07/11 Javascript
js基础之DOM中元素对象的属性方法详解
2016/10/28 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
nodejs 实现钉钉ISV接入的加密解密方法
2017/01/16 NodeJs
JavaScript实现图片无缝滚动效果
2017/07/07 Javascript
JS实现身份证输入框的输入效果
2017/08/21 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
JavaScript动态创建二维数组的方法示例
2019/02/01 Javascript
通过实例了解js函数中参数的传递
2019/06/15 Javascript
vue-cli3 热更新配置操作
2020/09/18 Javascript
让python 3支持mysqldb的解决方法
2017/02/14 Python
Python+matplotlib绘制不同大小和颜色散点图实例
2018/01/19 Python
在python中使用with打开多个文件的方法
2019/01/07 Python
python交换两个变量的值方法
2019/01/12 Python
python钉钉机器人运维脚本监控实例
2019/02/20 Python
Django Admin中增加导出Excel功能过程解析
2019/09/04 Python
python 利用已有Ner模型进行数据清洗合并代码
2019/12/24 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
linux mint中搜狗输入法导致pycharm卡死的问题
2020/10/28 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
Mountain Warehouse德国官网:英国户外零售商
2019/08/11 全球购物
JVM是一个编译程序还是解释程序
2012/09/11 面试题
工作的心得体会
2013/12/31 职场文书
《莫泊桑拜师》教学反思
2016/02/22 职场文书
python关于集合的知识案例详解
2021/05/30 Python
Nginx缓存设置案例详解
2021/09/15 Servers
《Estab Life》4月6日播出 正式PV、主视觉图公开
2022/03/20 日漫