编程 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 相关文章推荐

基于jQuey实现鼠标滑过变色(整行变色)

Dec 07 Javascript

Jquery实现$.fn.extend和$.extend函数

Apr 14 Javascript

Javascript实现图片不间断滚动的代码

Jun 22 Javascript

Bootstrap Navbar Component实现响应式导航

Oct 08 Javascript

bootstrap flask登录页面编写实例

Nov 01 Javascript

详解angularjs中如何实现控制器和指令之间交互

May 31 Javascript

npm国内镜像安装失败的几种解决方案

Jun 04 Javascript

在ABP框架中使用BootstrapTable组件的方法

Jul 31 Javascript

基于Vue实例对象的数据选项

Aug 09 Javascript

JavaScript实现一个简易的计算器实例代码

May 10 Javascript

vscode配置vue下的es6规范自动格式化详解

Mar 20 Javascript

详解JavaScript修改注册表的方法

Jan 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

php,ajax实现分页

2008/03/27 PHP

应用开发中涉及到的css和php笔记分享

2011/08/02 PHP

preg_match_all使用心得分享

2014/01/31 PHP

ThinkPHP3.1数据CURD操作快速入门

2014/06/19 PHP

php中get_object_vars()方法用法实例

2015/02/08 PHP

php json_encode与json_decode详解及实例

2016/12/13 PHP

javascript中的几个运算符

2007/06/29 Javascript

javascript getElementsByName()的用法说明

2009/07/31 Javascript

用JavaScript仿PS里的羽化效果代码

2011/12/20 Javascript

详解JavaScript中shift()方法的使用

2015/06/09 Javascript

AngularJS入门教程之XHR和依赖注入详解

2016/08/18 Javascript

jQuery中fadein与fadeout方法用法示例

2016/09/16 Javascript

bootstrap表格分页实例讲解

2016/12/30 Javascript

纯js实现的积木(div层)拖动功能示例

2017/07/19 Javascript

JS中Swiper的使用和轮播图效果

2017/08/11 Javascript

浅谈js的解析顺序作用域严格模式

2017/10/23 Javascript

jQuery实现手风琴效果（蒙版）

2020/01/11 jQuery

javascript实现贪吃蛇游戏（娱乐版）

2020/08/17 Javascript

[42:56]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.19

2018/08/21 DOTA

[43:03]完美世界DOTA2联赛PWL S2 PXG vs Magma 第二场 11.21

2020/11/24 DOTA

python sqlobject(mysql)中文乱码解决方法

2008/11/14 Python

Python的Django框架中的Context使用

2015/07/15 Python

python爬虫框架scrapy实战之爬取京东商城进阶篇

2017/04/24 Python

python利用lxml读写xml格式的文件

2017/08/10 Python

解决pytorch GPU 计算过程中出现内存耗尽的问题

2019/08/19 Python

Python 网络编程之TCP客户端/服务端功能示例【基于socket套接字】

2019/10/12 Python

解决Python在导入文件时的FileNotFoundError问题

2020/04/10 Python

Pycharm添加虚拟解释器报错问题解决方案

2020/10/13 Python

详解anaconda安装步骤

2020/11/23 Python

测试时代收集的软件测试面试题

2013/09/25 面试题

面临毕业的毕业生自荐书范文

2014/02/05 职场文书

餐饮投资计划书

2014/04/25 职场文书

学校教代会开幕词

2016/03/04 职场文书

各类场合主持词开场白范文集锦

2019/08/16 职场文书

详解JVM系列之内存模型

2021/06/10 Javascript

使用python绘制横竖条形图

2022/04/21 Python