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基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
Aug 05 Javascript
jQuery实现的立体文字渐变效果
May 17 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
Jul 26 Javascript
JS鼠标事件大全 推荐收藏
Nov 01 Javascript
小议JavaScript中Generator和Iterator的使用
Jul 29 Javascript
Bootstrap实现带动画过渡的弹出框
Aug 09 Javascript
微信小程序 rich-text的使用方法
Aug 04 Javascript
JavaScript 高性能数组去重的方法
Sep 20 Javascript
vue3.0中使用postcss-pxtorem的具体方法
Nov 20 Javascript
JavaScript ES6 Class类实现原理详解
May 08 Javascript
Vue Render函数原理及代码实例解析
Jul 30 Javascript
jquery实现抽奖功能
Oct 22 jQuery
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
php中inlcude()性能对比详解
2012/09/16 PHP
慎用preg_replace危险的/e修饰符(一句话后门常用)
2013/06/19 PHP
PHP设计模式之适配器模式原理与用法分析
2018/04/25 PHP
return false;和e.preventDefault();的区别
2010/07/11 Javascript
javascript验证上传文件的类型限制必须为某些格式
2013/11/14 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
2015/09/19 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
2016/05/04 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
2016/06/08 Javascript
js 实现数值的千分位及保存小数方法(推荐)
2016/08/01 Javascript
JavaScript中的冒泡排序法
2016/08/03 Javascript
xmlplus组件设计系列之按钮(2)
2017/04/26 Javascript
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
jQuery remove()过滤被删除的元素(推荐)
2017/07/18 jQuery
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
layui实现左侧菜单点击右侧内容区显示
2019/07/26 Javascript
轻松实现python搭建微信公众平台
2016/02/16 Python
Python实现的字典值比较功能示例
2018/01/08 Python
Python 查看文件的读写权限方法
2018/01/23 Python
python实现二维插值的三维显示
2018/12/17 Python
pycharm创建scrapy项目教程及遇到的坑解析
2019/08/15 Python
django自带调试服务器的使用详解
2019/08/29 Python
Python中的延迟绑定原理详解
2019/10/11 Python
python实现while循环打印星星的四种形状
2019/11/23 Python
jupyter notebook中美观显示矩阵实例
2020/04/17 Python
Silk’n激光脱毛器官网:silkn.com
2016/10/06 全球购物
贝尔帐篷精品店:Bell Tent Boutique
2019/06/12 全球购物
母亲七十大寿答谢词
2014/01/18 职场文书
俄语专业毕业生求职信
2014/07/12 职场文书
月度优秀员工获奖感言
2014/08/16 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
培训讲师开场白
2015/06/01 职场文书
2019年怎样才能撰写出优秀的自荐信
2019/03/25 职场文书
500字作文之关于爸爸
2019/11/14 职场文书