快捷導(dǎo)航

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

更新時(shí)間：2019年06月22日 10:45:22 作者：etemal_bright

這篇文章主要介紹了js圖片查看器插件用法,結(jié)合實(shí)例形式分析了圖片查看器插件viewer.js簡(jiǎn)單使用技巧,需要的朋友可以參考下

本文實(shí)例講述了js圖片查看器插件。分享給大家供大家參考，具體如下：

<!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>

查看效果如下所示：

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

js判斷移動(dòng)端橫豎屏視口檢測(cè)實(shí)現(xiàn)的幾種方法
最近做歌一個(gè)小項(xiàng)目，但是要放到我們的app上，然而需要橫豎屏使用不同的樣式，本文就來介紹一下js判斷移動(dòng)端橫豎屏視口檢測(cè)實(shí)現(xiàn)的幾種方法，感興趣的可以了解一下
2021-07-07
javascript設(shè)計(jì)模式 – 職責(zé)鏈模式原理與用法實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 職責(zé)鏈模式,結(jié)合實(shí)例形式分析了javascript職責(zé)鏈模式相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下
2020-04-04
JS可以控制樣式的名稱寫法一覽
這篇文章主要介紹了JS可以控制樣式的名稱寫法，有需要的朋友可以參考一下
2014-01-01
JavaScript事件委托(事件代理)舉例詳解
JavaScript事件委托是一種常見的優(yōu)化性能的技術(shù),它利用了事件冒泡的機(jī)制,將事件處理程序綁定在父元素上,而不是綁定在每個(gè)子元素上,這篇文章主要給大家介紹了關(guān)于JavaScript事件委托(事件代理)的相關(guān)資料,需要的朋友可以參考下
2024-03-03
JavaScript"模擬事件"的注意要點(diǎn)詳解
今天小編就為大家分享一篇關(guān)于JavaScript"模擬事件"的注意要點(diǎn)詳解，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧
2019-02-02
js Object2String方便查看js對(duì)象內(nèi)容
這篇文章主要介紹了將JS的任意對(duì)象輸出為json格式字符串的方法,需要的朋友可以參考下
2014-11-11
JavaScript實(shí)現(xiàn)打地鼠小游戲
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)打地鼠小游戲的相關(guān)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
關(guān)于JavaScript中URL對(duì)象的一些妙用
avaScript URL() 構(gòu)造函數(shù)返回一個(gè)新創(chuàng)建的 URL 對(duì)象,表示由一組參數(shù)定義的 URL,利用該構(gòu)造函數(shù)可以獲取 RL的查詢、參數(shù)等,下面這篇文章主要給大家介紹了關(guān)于JavaScript URL對(duì)象的一些妙用,需要的朋友可以參考下
2021-10-10
Js中async/await的執(zhí)行順序詳解
隨著async/await正式納入ES7標(biāo)準(zhǔn)，越來越多的人開始研究據(jù)說是異步編程終級(jí)解決方案的 async/await。下面這篇文章主要給大家介紹了關(guān)于Js中async/await執(zhí)行順序的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-09-09
基于JavaScript實(shí)現(xiàn)TAB標(biāo)簽效果
js實(shí)現(xiàn)tab標(biāo)簽效果，在項(xiàng)目中經(jīng)常用到，今天抽點(diǎn)時(shí)間把我寫的js實(shí)現(xiàn)tab標(biāo)簽效果源碼分享給大家，對(duì)js tab標(biāo)簽代碼需要的朋友參考下
2016-01-01