最近在寫一個移動端項目，遇到這么一個需求，在某個頁面內點擊圖片進行預覽，並可以實現放大縮小的功能。於是我查找了很多資料，自己整理了一個Demo，以便日后用得到。
先上效果圖
我放的效果圖是模擬移動端測的，該插件同樣適用於PC端。
引用
<link rel="stylesheet" type="text/css" href="viewerjs/viewer.min.css">
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="viewerjs/viewer.min.js"></script>
<script type="text/javascript" src="jquery-viewer/jquery-viewer.min.js"></script>
需要引用的文件有
- viewer.min.css
- jquery-2.1.4.min.js
- viewer.min.js
- jquery-viewer.min.js
下載地址在這里哦！
https://gitee.com/xiji666/love/tree/master/viewer_demo
項目路徑
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<link rel="stylesheet" type="text/css" href="viewerjs/viewer.min.css">
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="viewerjs/viewer.min.js"></script>
<script type="text/javascript" src="jquery-viewer/jquery-viewer.min.js"></script>
<style type="text/css"> *{ margin: 0; padding: 0; } .show { text-align: center; } .show > img { width: 500px; } </style>
<script type="text/javascript"> $(document).ready(function () { $('.show').viewer({ navbar: false, button: true, toolbar: false, title: false }); }); </script>
</head>
<body>
<div class="show">
<img src="image/a.jpg">
</div>
</body>
</html>
我需要做的僅僅是點擊圖片實現預覽並放大的功能，當然，viewer.js這個插件功能很強大，不僅支持對圖片的預覽和縮放，還支持對圖片進行旋轉和鏡像，把代碼中的'toolbar:false,'改為'toolbar:true,'就可以了，效果如下圖：
里面還有很多值得我們去學習的地方！
print_r('點個好看吧！');
var_dump('點個好看吧！');
NSLog(@"點個好看吧！");
System.out.println("點個好看吧！");
console.log("點個好看吧！");
print("點個好看吧！");
printf("點個好看吧！");
cout << "點個好看吧！" << endl;
Console.WriteLine("點個好看吧！");
fmt.Println("點個好看吧！");
Response.Write("點個好看吧！");
alert("點個好看吧！")
echo "點個好看吧！"