导读：生命不息，折腾不止
第二次写文章，其实我一直都不明白为什么很多人喜欢写文章，现在我好想知道一点点了，学到的东西一旦过了一段时间，好像就忘了…
看来写文章，或许有这么个原因吧，担心有一天忘了。
回到正题：
这次主要是想到了一个点击图片全屏加载，想到就做，毕竟生命不息，折腾不止！
本次主要用到了jQuery，可以用原生JS实现，但是需要封装的函数太多，不过这难不倒我，等待有时间就用原生JS写一遍，先把思路理顺一下
1.点击图片，图片放大。
2.背景用遮罩盖着，这样能够更有效的让眼神集中到图片上，既然做的是这个效果，那么就要顺着这个理念走下去。
3.当放大之后再次点击图片/背景就把图片恢复正常。
4.还要兼容IE5以上…
好，顺着这个思路走下去（其中会碰到很多的细节问题，稍后在文中细说）
jQuery(document).ready(function() {
var protoWidth = 0, //这个很重要是恢复图片时候用到的值
protoHeight = 0; //同上
$(document).on('click', function (e) {
var $a = $(e.target); //获取点击目标
if($a.is('img') && !$a.is('.screenimg')){
bigimg();
}else{
normalimg();
}
});
}); 这里用到的是一个事件委托，可能有人或许不是很理解这种方式，我简单说一下我的理解方式，简单接地气点吧！
—————————————–start—————————–
比如：我有一个4人团队，其中3个小弟，一个大哥，我给3个小弟发工资，然后我就走了，后面老大又招进来了几个小弟，但我已经走了，工资发不了（这里的工资大家理解为是添加的事件如：点击事件/鼠标移动/鼠标进入…），但这个不行啊，你一定要做事才行，不做事那有什么用。
事件委托：我跟大哥说，以后发工资就由你来发，只要有新进来的小弟，你就给我发工资。（意思就是：以后他们的事件委托大哥你来处理，只要确定他是我们团队（document）的人（img），你就给我添加事件）。
—————————————–end—————————–
既然用到了事件委托，那么就要用到事件对象，
如果是的话，你给我执行 bigimg() 这个函数，不是的话，就执行另外一个。
function bigimg() {
var sw = $('body').width() / 2 || $(window).width() / 2, //获得浏览器可视区域的宽度
sh = $('body').height() / 2 || $(window).height() / 2, //获得浏览器可视区域的高度
w = $a.width(), //获得图片本身宽
h = $a.height(), //获得图片本身高
sc = $a.width() / $a.height(), //获得图片的比例
st = $('body').scrollTop() || $(document).scrollTop(); //获取document被卷去的值
t = sh - (900 / sc / 2) + st, //计算图片在可视区域垂直坐标的位置
l = sw - (900 / 2); //计算图片在可视区域横向坐标的位置
if (protoWidth === 0) {
protoWidth = w;
protoHeight = h;
};
$('html').height(sh*2).css('overflow','hidden');
$a.css({'position': 'absolute', 'width': 0}).animate({'width': 900,'top': t,'left': l},500).addClass('screenimg');
$('.cover').animate({'top':st},200).fadeIn(300);
}; 先说一下sw(screenWidth),这里用了两个，一个是body，一个是window，body是为了兼容的IE5，以至于下面的用到的body都是兼容IE5用的。
sh（screenHeight），
w/h获取图片的宽高这里跟放大实际上没任何关系，但是如果图片还原不用这个值，那问题就大了，所以占两个位置
sc（scale），要把图片等比例放大肯定就要这个值，方式： imgW / imgH = 比例；
st（scrollTop）获取这个文档被卷去的值，因为要做的效果是，当图片放大就要把HTML的高度设为可视区域的高度，其余的隐藏，说白了就是去掉滚动条，让滚动失效。
我在此处本想用e.preventDefault，去除浏览器的默认行为，让滚动条失效，但是没用，可能比较菜，不知道这一功能该如何使用，所以还是用上面那种方法来实现好了。
t/l（top/left）这个是让图片显示在屏幕的正中间位置
下面这个判断很重要，如果是第一次点击，那么肯定是0，是0的话就把图片原始的宽高赋值给他，如果不是0，啥也不做，让图片还原这个判断需要用到，如果宽是0，那么高肯定也是0。所以给一个判断就OK。基本上就这些了，再下面的的就是一些用到的动画以及css赋值，有一定基础的基本上都能看懂，我所讲的只是一个思路。
function normalimg() {
$('html').height('100%').css('overflow','');
$('.screenimg').animate({'width': protoWidth}, 300).css({'position': '','top': '','left': ''}).removeClass('screenimg');
$('.cover').fadeOut(300).animate({'top':0},200);
}; 相比于放大，这正常的话，代码就少到姥姥家了，不需要判断不需要其它的，直接还原，一步到位，
这个不需要讲解什么了，基本上都看得懂，下面我把整个文档code全粘贴进去吧，需测试直接复制就行，不过文档中的图片src地址大家还得自己改。
总结
虽然说的比较简单，但是实现起来，思路啥的还是没有写完之后那么清晰，总共大概花了5个小时，菜的很，不然也不会花那么多时间了，说一下自己的过程，大家有兴趣就看看吧。
刚开始并没有写bigimg()以及normalimg()这两个函数，全程一个on(‘click’,function(){}),去写，碰壁多次，比如说，
1.当获取到目标是img之后，我要怎么判断这个图片是放大状态还是正常状态，想了一个，放大的图片我有用absolute这个css属性，写了一段时间之后，想了一下，要是项目中恰好有图片有这个css属性，那不就出大问题了？想了很多种方法来确定，比如说图片是不是我固定的宽度，想想还是算了。
2.当图片放大之后，我再次点击图片的话，没问题，图片可以缩小，但是如果我点击的是.cover这个遮罩呢？那么$a（获取点击的目标）就不是img了，而是.cover,那么我要关的话，怎么关（把图片恢复正常）？我可以把.cover关掉，但是图片呢，我哪知道这个图片是哪一张，难不成让我循环一次，循环到哪个图片是900宽就把这个图片给关掉？这要是一个页面有上百张我点一张循环上百次，整个页面点下来我不得循环个上千次？不显示，明显不要这么搞，效率低又笨拙。
难道要在每张图片后面生产一个.cover？这样好获取索引值，但是一想到整个页面全是.cover就觉得恶心了，虽然看不到，但就是觉得恶心。
3.改完后，一堆代码，既有重复的，看起来也不适合阅读，自己看起来都一脸懵逼，都不敢相信这自己写出来的代码，好了，花了十多分钟分装成函数好了。。。。。。。。。。。
最终就是这样的一个结果了。贴点图好了，动图就算了，懒得去整了。
点第一张图片
显示的样式
点其它图片显示过程
点文档图片恢复过程
**最后再吐槽一下CSDN的编辑器，简直不行，点击换行会把这一段给覆盖掉，烦死了。**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body,.cover{
width: 100%;
height: 100%;
}
.cover{
position: absolute;
top: 0;
z-index:1;
background: black;
display: none;
}
.screenimg{
border: 8px solid white;
}
.div{
width: 300px;
height: 300px;
margin: 200px auto;
}
img{
width: 100%;
z-index:2;
}
</style>
<script src="../../jquery-1.11.1.js"></script>
<script>
jQuery(document).ready(function() {
var protoWidth = 0,
protoHeight = 0;
$(document).on('click', function (e) {
var $a = $(e.target); //获取点击目标
if($a.is('img') && !$a.is('.screenimg')){
bigimg();
}else{
normalimg();
};
function bigimg() {
var sw = $('body').width() / 2 || $(window).width() / 2, //获得浏览器可视区域的宽度
sh = $('body').height() / 2 || $(window).height() / 2, //获得浏览器可视区域的高度
w = $a.width(), //获得图片本身宽
h = $a.height(), //获得图片本身高
sc = $a.width() / $a.height(), //获得图片的比例
st = $('body').scrollTop() || $(document).scrollTop(); //获取document被卷去的值
t = sh - (900 / sc / 2) + st, //计算图片在可视区域垂直坐标的位置
l = sw - (900 / 2); //计算图片在可视区域横向坐标的位置
if (protoWidth === 0) {
protoWidth = w;
protoHeight = h;
};
$('html').height(sh*2).css('overflow','hidden');
$a.css({'position': 'absolute', 'width': 0}).animate({'width': 900,'top': t,'left': l},500).addClass('screenimg');
$('.cover').animate({'top':st},200).fadeIn(300);
};
function normalimg() {
$('html').height('100%').css('overflow','');
$('.screenimg').animate({'width': protoWidth}, 300).css({'position': '','top': '','left': ''}).removeClass('screenimg');
$('.cover').fadeOut(300).animate({'top':0},200);
};
});
});
</script>
</head>
<body>
<div class="div">
<img src="../../images/pingguo.jpg" alt="" class="a b">
</div>
<div class="div">
<img src="../../images/pingguo.jpg" alt="" class="a b">
</div>
<div class="div">
<img src="../../images/pingguo.jpg" alt="" class="a b">
</div>
<div class="div">
<img src="../../images/pingguo.jpg" alt="" class="a b">
</div>
<div class="div">
<img src="../../images/pingguo.jpg" alt="" class="a b">
</div>
<div class="div">
<img src="../../images/pingguo.jpg" alt="" class="a b">
</div>
<div class="cover"></div>
</body>
</html>