DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>titletitle>
<link rel="stylesheet" type="text/css" href="../css/api.css"/> //这个css的作用是去边距的，就是清除默认样式，设置自己的默认样式的
<style>
body, html {
width: 100%;
height: 100%;
}
header {
width: 100%;
height: 50px;
background-color: #23C6C8;
margin-bottom: 40px;
color: #fff;
font-size: 18px;
line-height: 50px;
vertical-align: middle;
text-indent: 2em;
}
.main {
width: 98%;
margin-left: 2%;
}
.each-div {
width: 60px;
height: 60px;
text-align: center;
line-height: 90px;
vertical-align: middle;
float: left;
}
.main img {
height: 40px;
}
.preview {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgba(0,0,0,0.8);
}
.preview-content {
position: relative;
top: 50px;
left: 0;
overflow: auto;
}
.preview img {
position: absolute;
}
style>
head>
<body>
<header>图片预览测试header>
<div class="main">
<div class="each-div"><img src="images/icon_00.png"/>div>
<div class="each-div"><img src="images/icon_01.png"/>div>
<div class="each-div"><img src="images/icon_02.png"/>div>
<div class="each-div"><img src="images/icon_03.png"/>div>
<div class="each-div"><img src="images/icon_04.png"/>div>
<div class="each-div"><img src="images/icon_05.png"/>div>
<div class="each-div"><img src="images/icon_06.png"/>div>
<div class="each-div"><img src="images/icon_07.png"/>div>
<div class="each-div"><img src="images/icon_08.png"/>div>
<div class="each-div"><img src="images/icon_09.png"/>div>
<div class="each-div"><img src="images/icon_10.png"/>div>
<div class="each-div"><img src="images/icon_11.png"/>div>
<div class="each-div"><img src="images/icon_12.png"/>div>
<div class="each-div"><img src="images/icon_13.png"/>div>
<div class="each-div"><img src="images/icon_14.png"/>div>
<div class="each-div"><img src="images/icon_15.png"/>div>
<div class="each-div"><img src="images/icon_16.png"/>div>
<div class="each-div"><img src="images/icon_17.png"/>div>
<div class="each-div"><img src="images/icon_18.png"/>div>
<div class="each-div"><img src="images/icon_19.png"/>div>
<div class="each-div"><img src="images/icon_20.png"/>div>
<div class="each-div"><img src="images/icon_21.png"/>div>
div>
body>
<script type="text/javascript" src="jquery-2.1.1.js">script>
<script type="text/javascript">
var isPress = 0; // 是否已经点击过，用来判断是单击还是双击，使用setTimeout来判断，如果在第一次点击完0.5秒内点击第二次，即判断为双击
var isBiger = false; // 是否放大，在双击和双指放大缩小中均有使用。一旦缩放就自动判断为已经放大
var thisPicWidth, thisPicHeight; // 图片在加载完成后的当前大小
var theSpaceSite; // 上一个点的各种数据
/*
* 点击触发图片预览效果，后面如果改点击事件改这里，同时清空thisPicHeight、thisPicWidth
*/
$('.main').on('click', '.each-div', function() {
thisPicHeight = 0;
thisPicWidth = 0;
var mySrc = $(this).find('img').attr('src');
addPreview( $(this).find('img').attr('src') );
});
/*
* 添加预览图片的界面，传入参数为图片地址
*/
function addPreview(src) {
var node = $('
'
+ src + '"/>
