编程 Javascript

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程序设计有所帮助。

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

- Author -

etemal_bright

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

用javascript获得地址栏参数的两种方法

Nov 08 Javascript

js 可拖动列表实现代码

Dec 13 Javascript

Node.js和MongoDB实现简单日志分析系统

Apr 25 Javascript

js实现固定显示区域内自动缩放图片的方法

Jul 18 Javascript

JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件

Dec 20 Javascript

bootstrap学习笔记之初识bootstrap

Jun 21 Javascript

jQuery插件Validation快速完成表单验证的方式

Jul 28 Javascript

JavaScript实现复制文章自动添加版权

Aug 02 Javascript

js封装tab标签页实例分享

Dec 19 Javascript

seajs模块压缩问题与解决方法实例分析

Oct 10 Javascript

Vue实现内部组件轮播切换效果的示例代码

Apr 07 Javascript

Emberjs 通过 axios 下载文件的方法

Sep 03 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