脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js图片查看器

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

 更新时间：2019年06月22日 10:45:22   作者：etemal_bright  
这篇文章主要介绍了js图片查看器插件用法,结合实例形式分析了图片查看器插件viewer.js简单使用技巧,需要的朋友可以参考下

本文实例讲述了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>

查看效果如下所示：

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript图片操作技巧大全》、《JavaScript切换特效与技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • js判断移动端横竖屏视口检测实现的几种方法

    js判断移动端横竖屏视口检测实现的几种方法

    最近做歌一个小项目，但是要放到我们的app上，然而需要横竖屏使用不同的样式，本文就来介绍一下js判断移动端横竖屏视口检测实现的几种方法，感兴趣的可以了解一下
    2021-07-07
  • javascript设计模式 – 职责链模式原理与用法实例分析

    javascript设计模式 – 职责链模式原理与用法实例分析

    这篇文章主要介绍了javascript设计模式 – 职责链模式,结合实例形式分析了javascript职责链模式相关概念、原理、用法及操作注意事项,需要的朋友可以参考下
    2020-04-04
  • JS可以控制样式的名称写法一览

    JS可以控制样式的名称写法一览

    这篇文章主要介绍了JS可以控制样式的名称写法，有需要的朋友可以参考一下
    2014-01-01
  • JavaScript事件委托(事件代理)举例详解

    JavaScript事件委托(事件代理)举例详解

    JavaScript事件委托是一种常见的优化性能的技术,它利用了事件冒泡的机制,将事件处理程序绑定在父元素上,而不是绑定在每个子元素上,这篇文章主要给大家介绍了关于JavaScript事件委托(事件代理)的相关资料,需要的朋友可以参考下
    2024-03-03
  • JavaScript

    JavaScript"模拟事件"的注意要点详解

    今天小编就为大家分享一篇关于JavaScript"模拟事件"的注意要点详解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
    2019-02-02
  • js Object2String方便查看js对象内容

    js Object2String方便查看js对象内容

    这篇文章主要介绍了将JS的任意对象输出为json格式字符串的方法,需要的朋友可以参考下
    2014-11-11
  • JavaScript实现打地鼠小游戏

    JavaScript实现打地鼠小游戏

    这篇文章主要为大家详细介绍了JavaScript实现打地鼠小游戏的相关代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 关于JavaScript中URL对象的一些妙用

    关于JavaScript中URL对象的一些妙用

    avaScript URL() 构造函数返回一个新创建的 URL 对象,表示由一组参数定义的 URL,利用该构造函数可以获取 RL的查询、参数等,下面这篇文章主要给大家介绍了关于JavaScript URL对象的一些妙用,需要的朋友可以参考下
    2021-10-10
  • Js中async/await的执行顺序详解

    Js中async/await的执行顺序详解

    随着async/await正式纳入ES7标准，越来越多的人开始研究据说是异步编程终级解决方案的 async/await。下面这篇文章主要给大家介绍了关于Js中async/await执行顺序的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-09-09
  • 基于JavaScript实现TAB标签效果

    基于JavaScript实现TAB标签效果

    js实现tab标签效果，在项目中经常用到，今天抽点时间把我写的js实现tab标签效果源码分享给大家，对js tab标签代码需要的朋友参考下
    2016-01-01

最新评论