// 点击图片放大功能,需要在页面引入以下代码
.show-bigImg{
width: 1200/@rem;
height: auto;
margin: auto;
position: fixed;
top: 50%;
left: 50%;
}
.show-bigImg img{
max-width: 100%;
max-height: 800/@rem;
}
.mengceng{
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background-color: rgba(0,0,0,0.7);
display: none;
}
/*
<!--点击查看大图模块-->
<div class="mengceng">
<div class="show-bigImg">
<img src="" alt="" id="bigImg" οnclick="closeImg(this)">
</div>
</div>
*/
// 给img图片标签添加onClick=“bigImg(this)”事件
function bigImg(obj) {
var image = new Image(); //创建一个image对象
var path = obj.src;
image.src=path; //新创建的image添加src
var width = image.width; // 获取原始图片的宽
var hight = image.height; // 获取原始图片高
$("#bigImg").attr('src',path);
$(".show-bigImg").css({"margin-top":-hight/2,"margin-left":-width/2});// 居中;css中使用了fixed定位top:50%;left:50%;
$(".mengceng").css("display","block");
if (width>1200) {
$(".show-bigImg").css({"margin-left":-1200/2});
}
if (hight>800) {
$(".show-bigImg").css({"margin-top":-800/2});
}
}
// 点击放大图片关闭
function closeImg(obj) {
$("#bigImg").attr('src',"");
$(".mengceng").css("display","none");
}