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

 更新時間:2019年06月22日 10:45:23   作者: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程序設計有所幫助。

相關文章

  • 在多個頁面使用同一個HTML片段《續》

    在多個頁面使用同一個HTML片段《續》

    上一篇文章中我們使用textarea來模擬AJAX的返回結果,造成了一些誤解。 這里我們首先用asp.net的Generic Handler做一個簡單的后臺來重現這個AJAX過程。
    2011-03-03
  • 完美實現bootstrap分頁查詢

    完美實現bootstrap分頁查詢

    這篇文章主要介紹了一個完美的bootstrap分頁查詢,如何利用bootstrap實現分頁查詢,本文將為大家進行揭曉
    2015-12-12
  • 整理一下常見的IE錯誤

    整理一下常見的IE錯誤

    多年以來,IE一直都是最難于調試JavaScript 錯誤的瀏覽器。IE給出的錯誤消息一般很短又語焉不詳。而且上下文信息也很少,有時甚至一點都沒有。下面幾小節將分別探討一些在IE中難于調試的JavaScript 錯誤
    2016-11-11
  • Javascript設置對象的ReadOnly屬性(示例代碼)

    Javascript設置對象的ReadOnly屬性(示例代碼)

    本篇文章主要介紹了Javascript設置對象的ReadOnly屬性(示例代碼) 需要的朋友可以過來參考下,希望對大家有所幫助
    2013-12-12
  • JS實現最簡單的冒泡排序算法

    JS實現最簡單的冒泡排序算法

    這篇文章主要介紹了JS實現最簡單的冒泡排序算法,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2017-02-02
  • JavaScript快速切換繁體中文和簡體中文的方法及網站支持簡繁體切換的絕招

    JavaScript快速切換繁體中文和簡體中文的方法及網站支持簡繁體切

    這篇文章主要介紹了JavaScript快速切換繁體中文和簡體中文方法的相關資料,需要的朋友可以參考下
    2016-03-03
  • 基于cssSlidy.js插件實現響應式手機圖片輪播效果

    基于cssSlidy.js插件實現響應式手機圖片輪播效果

    cssSlidy是一款支持手機移動端的焦點圖輪播插件,支持標題設置,滑動動畫,間隔時間等。這篇文章主要基于cssSlidy.js插件實現響應式手機圖片輪播效果,
    2016-08-08
  • 如何為你的JavaScript代碼日志著色詳解

    如何為你的JavaScript代碼日志著色詳解

    這篇文章主要給大家介紹了關于如何為你的JavaScript代碼日志進行著色的相關資料,文中通過示例代碼介紹的非常詳細,對大家學習或者使用JavaScript具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧
    2019-04-04
  • javascript中this用法實例詳解

    javascript中this用法實例詳解

    這篇文章主要介紹了javascript中this用法,結合具體實例形式詳細分析了javascript中this的含義及對象、函數等各種調用中的使用技巧,需要的朋友可以參考下
    2017-04-04
  • 深入理解setTimeout函數和setInterval函數

    深入理解setTimeout函數和setInterval函數

    下面小編就為大家帶來一篇深入理解setTimeout函數和setInterval函數。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-05-05

最新評論

湖北11选5走势图爱彩乐