博客

viewer.js的简单应用(实现图片预览) – jQuery版本

  • Post author:
  • Post category:其他


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


需要引用的文件有

  1. viewer.min.css
  2. jquery-2.1.4.min.js
  3. viewer.min.js
  4. 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 "点个好看吧！"


版权声明：本文为weixin_43747105原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。