最近在写一个移动端项目，遇到这么一个需求，在某个页面内点击图片进行预览，并可以实现放大缩小的功能。于是我查找了很多资料，自己整理了一个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 "点个好看吧！"