js图片查看器插件用法示例


Posted in Javascript onJune 22, 2019

本文实例讲述了js图片查看器插件。分享给大家供大家参考,具体如下:

首先 在github上下载 js,css点击打开链接

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="../css/viewer.min.css" rel="external nofollow" >
  <script src="../lib/jquery.min.js"></script>
  <script src="../lib/viewer.min.js"></script>
</head>
<body>
<div id="viewer" class="viewer">
  <div><img src="images/thumbnails/tibet-1.jpg" data-original="images/tibet-1.jpg" alt="图片1"></div>
  <div><img src="images/thumbnails/tibet-2.jpg" data-original="images/tibet-2.jpg" alt="图片2"></div>
  <div><img src="images/thumbnails/tibet-3.jpg" data-original="images/tibet-3.jpg" alt="图片3"></div>
  <div><img src="images/thumbnails/tibet-4.jpg" data-original="images/tibet-4.jpg" alt="图片4"></div>
  <div><img src="images/thumbnails/tibet-5.jpg" data-original="images/tibet-5.jpg" alt="图片5"></div>
  <div><img src="images/thumbnails/tibet-6.jpg" data-original="images/tibet-6.jpg" alt="图片6"></div>
</div>
<script>
  $('.viewer').viewer();
//  $('.viewer').viewer({url:"data-original",});}
</script>
</body>
</html>

查看效果如下所示:

js图片查看器插件用法示例

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Javascript模板技术
Apr 27 Javascript
提高javascript效率 一次判断,而不要次次判断
Mar 30 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
Sep 01 Javascript
jquery实现右键菜单插件
Mar 29 Javascript
详解JavaScript中的Unescape()和String() 函数
Nov 09 Javascript
js操作XML文件的实现方法兼容IE与FireFox
Jun 25 Javascript
Javascript的this用法
Jan 16 Javascript
详解用node-images 打造简易图片服务器
May 08 Javascript
vue分页插件的使用方法
Dec 25 Javascript
JavaScript实时更新当前的时间的示例代码
Jul 15 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
Jan 07 Javascript
用JS创建一个录屏功能
Nov 11 Javascript
JS实现继承的几种常用方式示例
Jun 22 #Javascript
让 babel webpack vue 配置文件支持智能提示的方法
Jun 22 #Javascript
简单了解TypeScript中如何继承 Error 类
Jun 21 #Javascript
如何在JavaScript中谨慎使用代码注释
Jun 21 #Javascript
简单了解JavaScript中常见的反模式
Jun 21 #Javascript
通过图带你深入了解vue的响应式原理
Jun 21 #Javascript
10种JavaScript最常见的错误(小结)
Jun 21 #Javascript
You might like
杏林同学录(二)
2006/10/09 PHP
Yii PHP Framework实用入门教程(详细介绍)
2013/06/18 PHP
PHP生成和获取XML格式数据的方法
2016/03/04 PHP
thinkPHP2.1自定义标签库的导入方法详解
2016/07/20 PHP
php分页查询mysql结果的base64处理方法示例
2017/05/18 PHP
PHP生成指定范围内的N个不重复的随机数
2019/03/18 PHP
确保Laravel网站不会被嵌入到其他站点中的方法
2019/10/18 PHP
javascript中将Object转换为String函数代码 (json str)
2012/04/29 Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
2012/05/27 Javascript
JS格式化数字保留两位小数点示例代码
2013/10/15 Javascript
基于JavaScript实现瀑布流布局(二)
2016/01/26 Javascript
jQuery中的一些小技巧
2017/01/18 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
jquery mobile实现可折叠的导航按钮
2017/03/11 Javascript
AngularJS 霸道的过滤器小结
2017/04/26 Javascript
详解vue过滤器在v2.0版本用法
2017/06/01 Javascript
layui表格设计以及数据初始化详解
2019/10/26 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
基于Pandas读取csv文件Error的总结
2018/06/15 Python
pycharm重置设置,恢复默认设置的方法
2018/10/22 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
Python远程开发环境部署与调试过程图解
2019/12/09 Python
如何使用repr调试python程序
2020/02/28 Python
解决python运行效率不高的问题
2020/07/20 Python
python通过函数名调用函数的几种场景
2020/09/23 Python
Python 求向量的余弦值操作
2021/03/04 Python
TOWER London官网:鞋子、靴子、运动鞋等
2019/07/14 全球购物
触摸春天教学反思
2014/02/03 职场文书
精神文明建设先进个人事迹材料
2014/12/24 职场文书
工作保证书
2015/01/17 职场文书
煤矿安全生产管理协议书
2016/03/22 职场文书
Python可变集合和不可变集合的构造方法大全
2021/12/06 Python
Flutter集成高德地图并添加自定义Maker的实践
2022/04/07 Java/Android
JS前端使用Canvas快速实现手势解锁特效
2022/09/23 Javascript