欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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>

查看效果如下所示：

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript圖片操作技巧大全》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript運動效果與技巧匯總》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》

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

相關(guān)文章

最新評論