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