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

最近在写一个移动端项目,遇到这么一个需求,在某个页面内点击图片进行预览,并可以实现放大缩小的功能。于是我查找了很多资料,自己整理了一个Demo,以便日后用得到。

先上效果图

viewer.js的简单应用(实现图片预览) - jQuery版本_第1张图片 viewer.js的简单应用(实现图片预览) - jQuery版本_第2张图片

我放的效果图是模拟移动端测的,该插件同样适用于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

项目路径
viewer.js的简单应用(实现图片预览) - jQuery版本_第3张图片
代码


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demotitle>
	<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,'就可以了,效果如下图:
viewer.js的简单应用(实现图片预览) - jQuery版本_第4张图片

里面还有很多值得我们去学习的地方!

print_r('点个好看吧!');
var_dump('点个好看吧!');
NSLog(@"点个好看吧!");
System.out.println("点个好看吧!");
console.log("点个好看吧!");
print("点个好看吧!");
printf("点个好看吧!");
cout << "点个好看吧!" << endl;
Console.WriteLine("点个好看吧!");
fmt.Println("点个好看吧!");
Response.Write("点个好看吧!");
alert("点个好看吧!")
echo "点个好看吧!"

你可能感兴趣的:(viewer.js的简单应用(实现图片预览) - jQuery版本)