最近博客图片功能更新，博客图片点击放大，再点恢复原状 

如图：

博客内图片

点击图片后放大效果

html部分：

<div id="replyImg" >
    <img id="bigImg" src="" />
</div>

CSS部分：

#replyImg{
  -moz-user-select:none;
  -webkit-user-select:none;
  -ms-user-select:none;
  -khtml-user-select:none;
  user-select:none
}
.postCon img {
  cursor: url(https://wuguangnuo-1257896087.cos.ap-guangzhou.myqcloud.com/public/img/big.cur), default
}
#replyImg {
  text-align: center;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.6);
}
#replyImg img {
  max-height: 98%;
  max-width: 98%;
  border: 0;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  cursor: url(https://wuguangnuo-1257896087.cos.ap-guangzhou.myqcloud.com/public/img/small.cur), default
}

JS部分：

$("#replyImg").hide();//图片放大

$(".postCon img").click(function(){
	imgShow("#replyImg", "#bigImg", $(this).attr("src"));
});

function imgShow(div, img, src){
	$(div).css("height", $(window).height()*3 + "px").css("top", 0-$(window).height() + "px").attr('display', 'block').fadeIn("fast");
	$(img).css("max-height", ($(window).height()-80) + "px").css("top", "50px").attr("src", src);
	$(div).click(function(){
		$(this).fadeOut("fast");
	});
};

最后稍加修饰，以适应多种尺寸的屏幕和移动端

PS：

为配合jquery.lazyload.js实现图片懒加载，应将<img />转换成data-original

/**
 * 图片地址 src 转换成 data-original
 */
function srcToOriginal($content = ''){
	$pregRule = "/<[img|IMG].*?src=[\'|\"](.*?(?:[\.jpg|\.jpeg|\.png|\.gif|\.bmp|\.webp]))[\'|\"].*?[\/]?>/";
	$content = preg_replace($pregRule, '<img data-original="${1}">', $content);
	return $content;
}