页面代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript" src="http://cdn01.pukuimin.top/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
function stayCenter_absolute_pkm($imgdiv, $imgobj) {
///相对于浏览器的位置（浏览器的高度-本身的高度=层顶部到浏览器最上面的高度）
var $oldoffset = $imgobj.offset();//图片相对于html body的定位
var oldoffsetTop = $oldoffset.top - $(window).scrollTop();//相对于浏览器的定位
var oldoffsetLeft = $oldoffset.left;
$imgdiv.css("top", oldoffsetTop).css("left", oldoffsetLeft);//用来做出从原位置移动到中间位置的效果
var offsetTop = $(window).height() / 2 - $imgdiv.height() / 2 + "px";
var offsetLeft = $(window).width() / 2 - $imgdiv.width() / 2;
$imgdiv.animate({ top: offsetTop, "left": offsetLeft }, { duration: 600, queue: false });
};
$(function () {
var imageboxdiv =
'<div id="div_imgbox_shadow_pkm" class="fixed-div-style" style="z-index: 10050;display:none;background-color: #333 !important;opacity: .8;">' +
'</div>' +
'<div id="div_imgbox_pkm" class="fixed-div-style" style="z-index: 10051;display:none;">' +
' <div id="div_imgbox_img_pkm" style="position: absolute; border-style: solid; border-width: thin;border-color: Gray;">' +
' <img src="" />' +
' </div>' +
'</div>'
$("body").append(imageboxdiv);//图片点击放大事件显示的div
$("div.post_body img").each(function (index, imgobj) {// 图片点击放大事件
if ($(imgobj).parent().is("a") == false && $(imgobj).width() >= 620) {//只有图片的父标签不是a，并且宽度不小于620时才需要点击放大
$(imgobj).click(function () {
$("#div_imgbox_pkm img:first").attr("src", $(imgobj).attr("src"));
$("#div_imgbox_shadow_pkm,#div_imgbox_pkm").show();
stayCenter_absolute_pkm($("#div_imgbox_img_pkm"), $(imgobj));
});
}
});
$("#div_imgbox_pkm").click(function () {//放大后的图片div和遮罩div点击消失事件
$("#div_imgbox_shadow_pkm,#div_imgbox_pkm").hide();
});
})
</script>
<style type="text/css">
.fixed-div-style { position: fixed;top: 0;bottom: 0;left: 0;right: 0;overflow: auto;}
</style>
</head>
<body>
<div class="post_body">
<p>
<img src="http://cdn01.pukuimin.top/zb_users/upload/2017/lantern01.png" width="640" height="485" border="0" hspace="0" vspace="0" title="" style="width: 640px; height: 485px;">
</p>
</div>
</body>
</html>cdn图片或js引用可能有防盗链显示不出来，查看效果可访问 图片放大示例 并点击页面中的图片（已经将它使用在本站所有文章页面），因为本站页面宽度不够，有些大图不能显示完全，只能点击放大显示得更加清晰。
评论列表: