html代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>单张图片模态框</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="js/jquery-3.2.0.min.js"></script>
</head>
<body>
<div class="tuijianmenu-menu">
<div class="tuijianmenu-item">
<img src="images/01.jpg" alt="model test picture1" class="arealimg">
<!-- 图片模态框 -->
<div class="motai" id="mo">
<span class="close" id="close">×</span>
<img class="amotaiimg" src="motaiimg" id="moimg">
<div class="acaption" id="caption"></div>
</div>
</div>
<div class="tuijianmenu-item">
<img src="images/02.jpg" alt="model test picture2" class="arealimg">
</div>
<div class="tuijianmenu-item">
<img src="images/03.jpg" alt="model test picture3" class="arealimg">
</div>
<div class="tuijianmenu-item">
<img src="images/04.jpg" alt="model test picture4" class="arealimg">
</div>
</div>
</body>
</html>
js代码：
<script type="text/javascript">
$(document).ready(function(){
$(‘.tuijianmenu-item‘).click(function(e){
var imgsrc=$(this).children("img.arealimg").attr(‘src‘);
var imgalt=$(this).children("img.arealimg").attr(‘alt‘);
var currentDivId = $(" .motai").attr(‘id‘);
var currentCloseId=$(" .motai .close").attr("id");
var currentMoImgId=$(" .motai img").attr(‘id‘);
var currentCaptionId=$(" .motai div").attr(‘id‘);
var motai=document.getElementById(currentDivId);
var moimg=document.getElementById(currentMoImgId);
var caption=document.getElementById(currentCaptionId);
motai.style.display="block";
moimg.src=imgsrc;
caption.innerHTML=imgalt;
var close=document.getElementById(currentCloseId);
$(‘.motai .close‘).mousedown(function () {
motai.style.display="none";
});
});
});
</script>
css代码：
/*推荐菜单*/
.tuijianmenu-menu{
width:100%;
height:210px;
margin:20px auto;
}
.tuijianmenu-item{
width:23%;
margin:0 10px;
float:left;
height:200px;
cursor:pointer;
}
.arealimg{
margin:0;
width:100%;
height:100%;
border-radius:6px;
}
.arealimg:hover{
opacity:0.6;
}
.motai{
display:none;
width:100%;
height:100%;
position:fixed;
overflow:auto;
background-color:rgba(0,0,0,0.7);
top:0;
left:0;
z-index:600;
}
.amotaiimg{
display:block;
margin:25px auto;
width:50%;
max-width:750px;
}
.acaption{
text-align:center;
margin:15px auto;
width:60%;
max-height:750px;
font-size:20px;
color:#ccc;
}
.amotaiimg,.acaption{
-webkit-animation:first 1s;
-o-animation:first 1s;
animation:first 1s;
}
@keyframes first{
from{transform:scale(0.1);}
to{transform:scale(1);}
}
.close{
font-size:40px;
font-weight:bold;
position:absolute;
top:20px;
right:14%;
color:#f1f1f1;
}
.close:hover,.close:focus{
color:#bbb;
cursor:pointer;
}
@media only screen and(max-width:750px){
#moimg{
width:100%;
}
}
/*/推荐菜单*/
综上所述，就会有个漂亮的图片展示代码啦
点击：
时间： 2024-10-08 17:44:20