簡單的點選圖片放大
阿新 • • 發佈:2018-12-30
<style>
.bigPicWrap{
width: 100%;
position: fixed;
top:0;
left:0;
background-color: rgba(0,0,0,0.6);
text-align: center;
display: none;
z-index: 1100;
}
.bigPicBox{
width: 80%;
margin: 0 auto;
text-align: center ;
}
.bigPicBox img{
width: 100%;
}
</style>
<body>
<div class="bigPicWrap">
<div class="bigPicBox">
<img src="" style="display: inline-block; vertical-align: middle;">
</div>
</div>
</body>
<script type="text/javascript">
$(".bigPicWrap").height($(window).height()+"px");
var _height = $(document.body).height();
console.log(_height);
$(".bigPicBox").css({
"height" : _height+"px",
"line-height" : _height+"px"
});
function bigPic() {
$(".casePicture" ).on("click",function () {
var _img = $(this).data("img");
$(".bigPicBox").find("img").attr("src",_img);
$(".bigPicWrap").fadeIn();
});
$(".bigPicWrap").on("click",function(){
$(".bigPicWrap").fadeOut();
})
}
bigPic();
</script>