最近博客图片功能更新,博客图片点击放大,再点恢复原状
如图:
博客内图片
点击图片后放大效果
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;
}