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數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章:

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