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居然支持中文(unicode)编程!
Apr 12 Javascript
js删除所有的cookie的代码
Nov 25 Javascript
10款非常有用的 Ajax 插件分享
Mar 14 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
Sep 28 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
Jun 25 Javascript
JavaScript 数据类型详解
Mar 13 Javascript
微信小程序多音频播放进度条问题
Aug 28 Javascript
详解vue文件中使用echarts.js的两种方式
Oct 18 Javascript
Vue开发中遇到的跨域问题及解决方法
Feb 11 Javascript
如何手写简易的 Vue Router
Oct 10 Javascript
关于JavaScript 中 if包含逗号表达式
Nov 27 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
用PHP实现弹出消息提示框的两种方法
2013/12/17 PHP
使用jquery自定义鼠标样式满足个性需求
2013/11/05 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
2013/12/04 Javascript
jQuery中hasClass()方法用法实例
2015/01/06 Javascript
被遗忘的javascript的slice() 方法
2015/04/20 Javascript
javascript定义类和类的实现实例详解
2015/12/01 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
JavaScript使用键盘输入控制实现数字验证功能
2016/08/19 Javascript
JQuery Ajax WebService传递参数的简单实例
2016/11/02 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
JavaScript中数组Array.sort()排序方法详解
2017/03/01 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
2017/03/07 Javascript
详解vue-loader在项目中是如何配置的
2018/06/04 Javascript
JavaScript箭头函数中的this详解
2019/06/19 Javascript
JavaScript 截取字符串代码实例
2019/09/05 Javascript
微信小程序 轮播图实现原理及优化详解
2019/09/29 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
2019/10/26 jQuery
javascript实现视频弹幕效果(两个版本)
2019/11/28 Javascript
原生JS实现多条件筛选
2020/08/19 Javascript
用Python写飞机大战游戏之pygame入门(4):获取鼠标的位置及运动
2015/11/05 Python
python安装与使用redis的方法
2016/04/19 Python
Flask框架的学习指南之用户登录管理
2016/11/20 Python
Python Socket传输文件示例
2017/01/16 Python
python实现简单遗传算法
2018/03/19 Python
高效使用Python字典的清单
2018/04/04 Python
Python docx库用法示例分析
2019/02/16 Python
python matplotlib画图库学习绘制常用的图
2019/03/19 Python
Python字符串中添加、插入特定字符的方法
2019/09/10 Python
如何基于Python实现数字类型转换
2020/02/07 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
大学生校园创业计划书
2014/02/08 职场文书
临床医师个人自我评价
2014/04/06 职场文书
石油工程专业毕业生求职信
2014/04/13 职场文书
2015年国庆节广播稿
2015/08/19 职场文书
500字作文之关于爸爸
2019/11/14 职场文书
java版 联机五子棋游戏
2022/05/04 Java/Android