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程序設計有所幫助。

相關文章

最新評論

湖北11选5走势图爱彩乐 安徽快3基本走势图表 不联网单机四人麻将 贵州快三第一期几点开 欢乐彩票官网客服电话 福州麻将怎么打初学规则 海南飞鱼开奖 微乐捉鸡麻将下载安 今日山西快乐10分走势 3d开奖结果今天试 北方推倒胡怎么玩图解 深圳风采35选7走势图 手机真钱捕鱼平台 26选5一定要五个都中了才有奖吗 云南麻将烂牌怎么胡 长沙麻将碰碰胡图解 天天爱捕鱼