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 相关文章推荐
不用ajax实现点击文字即可编辑的方法
Dec 16 Javascript
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
Mar 14 Javascript
javascript创建和存储cookie示例
Jan 07 Javascript
JS实现图片放大镜效果的方法
Feb 27 Javascript
使用控制台破解百小度一个月只准改一次名字
Aug 13 Javascript
jQuery动态移除和添加背景图片的方法详解
Mar 07 Javascript
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
WdatePicker.js时间日期插件的使用方法
Jul 26 Javascript
vue源码学习之Object.defineProperty对象属性监听
May 30 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
Mar 22 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
Jun 17 Javascript
Vue路由管理器Vue-router的使用方法详解
Feb 05 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
PHP5+UTF8多文件上传类
2008/10/17 PHP
PHP目录函数实现创建、读取目录教程实例
2011/01/13 PHP
通达OA公共代码 php常用检测函数
2011/12/14 PHP
分享一个漂亮的php验证码类
2016/09/29 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
Javascript中的数学函数
2007/04/04 Javascript
JavaScript调用Activex控件的事件的实现方法
2010/04/11 Javascript
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
js使用递归解析xml
2014/12/12 Javascript
jQuery中offsetParent()方法用法实例
2015/01/19 Javascript
jQuery鼠标事件总结
2016/10/13 Javascript
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
微信小程序Getuserinfo解决方案图解
2018/08/24 Javascript
深入理解webpack process.env.NODE_ENV配置
2020/02/23 Javascript
[02:04]2020年夜魇暗潮预告片
2020/10/30 DOTA
python中如何使用朴素贝叶斯算法
2017/04/06 Python
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
读取本地json文件,解析json(实例讲解)
2017/12/06 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
Python中循环引用(import)失败的解决方法
2018/04/22 Python
python 输出所有大小写字母的方法
2019/01/02 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
Python爬虫使用浏览器cookies:browsercookie过程解析
2019/10/22 Python
python中pyqtgraph知识点总结
2021/01/26 Python
CSS3制作日历实现代码
2012/01/21 HTML / CSS
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
2017/07/31 HTML / CSS
数据管理员的自我评价分享
2013/11/15 职场文书
好人好事事迹材料
2014/02/12 职场文书
2014年三万活动总结
2014/04/26 职场文书
做一个有道德的人演讲稿
2014/05/14 职场文书
纪律教育月活动总结
2014/08/26 职场文书
成都人事代理协议书
2014/10/25 职场文书
培训计划通知
2015/07/15 职场文书
看古人们是如何赞美老师的?
2019/07/08 职场文书
python模拟浏览器 使用selenium进入好友QQ空间并留言
2022/04/12 Python