<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../files/js/jquery-3.3.1.min.js"></script>
<style>
.image_normal{
width: 200px;
height: 200px
}
.image_large{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0,0,0,.3);
z-index: 100;
display: none
}
.image_large{
z-index: 999;
}
</style>
</head>
<body>
<!-- 图片放大 -->
<div class=" ">
<img src="../files/img/bcLogina.png" class="image_normal">
<div class="image_large"></div>
</div>
<script type="text/javascript">
$(function () {
$(".image_normal").click(function () {
var large_image = '<img src= ' + $(this).attr("src") + '></img>';
console.log(large_image)
$('.image_large').html($(large_image).css({
display:"block",
height: '50%',
width: '50%',
position: "absolute",
left: "50%",
top: "50%",
transform: "translate(-50%,-50%)",
}, 500));
$('.image_large').css( "display","block" );
});
$('.image_large').click(function(){
$(this).css( "display","none" );
})
});
</script>
</body>
</html>
