网页中的图片查看器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事件之键盘事件(ctrl+Enter回车键提交表单等)
May 11 Javascript
jQuery的position()方法详解
Jul 19 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
Oct 15 Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 Javascript
jQuery中的deferred使用方法
Mar 27 jQuery
javascript 中关于array的常用方法详解
May 05 Javascript
深入理解JavaScript 参数按值传递
May 24 Javascript
微信小程序 按钮滑动的实现方法
Sep 27 Javascript
微信小程序实现美团菜单
Jun 06 Javascript
基于node简单实现RSA加解密的方法步骤
Mar 21 Javascript
小程序封装路由文件和路由方法(5种全解析)
May 26 Javascript
对layui中table组件工具栏的使用详解
Sep 19 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
Body是什么,该怎么喝出咖啡里的口感
2021/03/03 咖啡文化
模仿OSO的论坛(一)
2006/10/09 PHP
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
php使用递归计算文件夹大小
2014/12/24 PHP
PHP实现二叉树的深度优先与广度优先遍历方法
2015/09/28 PHP
jQuery 页面 Mask实现代码
2010/01/09 Javascript
js点击事件链接的问题解决
2014/04/25 Javascript
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
vue自定义指令实现v-tap插件
2016/11/03 Javascript
Canvas实现放射线动画效果
2017/02/15 Javascript
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
vue如何判断dom的class
2018/04/26 Javascript
JavaScript对JSON数组简单排序操作示例
2019/01/31 Javascript
js实现简单的随机点名器
2020/09/17 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
2020/11/11 Javascript
[04:39]显微镜下的DOTA2第十三期—Pis卡尔个人秀
2014/04/04 DOTA
Python2包含中文报错的解决方法
2018/07/09 Python
Django 开发调试工具 Django-debug-toolbar使用详解
2019/07/23 Python
Python zip函数打包元素实例解析
2019/12/11 Python
用python介绍4种常用的单链表翻转的方法小结
2020/02/24 Python
PyTorch在Windows环境搭建的方法步骤
2020/05/12 Python
python软件都是免费的吗
2020/06/18 Python
django模型类中,null=True,blank=True用法说明
2020/07/09 Python
详解Python爬虫爬取博客园问题列表所有的问题
2021/01/18 Python
Python3自带工具2to3.py 转换 Python2.x 代码到Python3的操作
2021/03/03 Python
详解Css3新特性应用之过渡与动画
2017/01/10 HTML / CSS
移动HTML5前端框架—MUI的使用
2017/12/18 HTML / CSS
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
十岁生日家长答谢词
2014/01/17 职场文书
工作保证书范文
2014/04/29 职场文书
采购内勤岗位职责
2015/04/13 职场文书
2015年学校办公室主任工作总结
2015/07/20 职场文书
字节飞书面试promise.all实现示例
2022/06/16 Javascript
VUE递归树形实现多级列表
2022/07/15 Vue.js