1.样式
<style type="text/css">
/*媒体判断HTML里的font-size*/
html { font-size: 40px; } @media screen and (min-width: 320px) { html { font-size: 17.064px; } } @media screen and (min-width: 360px) { html { font-size: 19.2px; } } @media screen and (min-width: 375px) { html { font-size: 20px; } } @media screen and (min-width: 384px) { html { font-size: 20.48px; } } @media screen and (min-width: 400px) { html { font-size: 21.376px; } } @media screen and (min-width: 414px) { html { font-size: 22.08px; } } @media screen and (min-width: 424px) { html { font-size: 22.616px; } } @media screen and (min-width: 480px) { html { font-size: 25.6px; } } @media screen and (min-width: 540px) { html { font-size: 28.8px; } } @media screen and (min-width: 720px) { html { font-size: 38.4px; } } @media screen and (min-width: 750px) { html { font-size: 40px; } }
/*一张大图*/
.one_bigPic_contain{
position: fixed;
width: 100%;
height: 100%;
background-color: #000;
top: 0;
left: 0;
}
.one_bigPic_contain_wrap {
position: relative;
top: 50%;
}
.one_bigPic_contain_close {
width: 1rem;
height: 1rem;
line-height: 1rem;
text-align: center;
position: absolute;
right: 0.3rem;
top: 0;
color: #fff;
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border: 0.05rem solid #fff;
background-color: rgba(0,0,0,0.5);
z-index: 5;
}
.one_bigPic_pic {
position: relative;
left: 0;
top: 0;
width: 100%;
text-align: center;
}
.one_bigPic_pic img{
max-width: 100%;
vertical-align:middle;
}
.detail-infoBar{
width: 1.85rem;
height: 1.85rem;
border-radius:100%;
}
.detail-infoBar img{
width: 1.85rem;
height: 1.85rem;
border-radius:100%;
}
</style>
2.HTML部分
<!--点击的对象(需要图片地址)-->
<div class="detail-infoBar" style="">
<img src="xxx.jpg" />
</div>
<!--一张大图部分-->
<div class="one_bigPic_contain" style="display: none;">
<div class="one_bigPic_contain_wrap">
<div class="one_bigPic_contain_close">×</div>
<div class="one_bigPic_pic">
<img src="" class="one_bigPic_img"/>
</div>
</div>
</div>
3.js
<!--引入jq-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//一张大图
//点击的图片目标
$(".detail-infoBar img").on("click",function(){
//创建img标签
var str= '<img src="'+$(this)[0].src+'" alt="" class="one_bigPic_img" />';
//放入容器
$(".one_bigPic_pic").html(str);
//此处先让其block方便后边获取相应的元素宽高再设置相应的元素宽高
//可能有疑问,一般情况先设置好宽高再进行显示才对,而这里是先显示再设置宽高
//原因:如果不让其显示,无法获取所需元素的宽高(一直都是0),所以此处必须先显示再获取宽高
//img是新生成的元素,整个容器的宽高都由img撑起的
$(".one_bigPic_contain").css("display","block");
var img_height=$(".one_bigPic_pic img").height();
$(".one_bigPic_contain_wrap").css({"margin-top":-img_height/2+"px"});
$(".one_bigPic_pic").css({"height":img_height+"px","line-height":img_height+"px"})
});
//关闭大图
$(".one_bigPic_contain_close").on("click",function(){
$(".one_bigPic_contain").css("display","none");
});
</script>
4.说明:
图片路径需自己填充。