html点击图⽚img标签将图⽚显⽰为原始图⽚⼤⼩
// 点击图⽚放⼤功能，需要在页⾯引⼊以下代码
// 点击查看图⽚放⼤功能
.show-bigImg{
width: 1200/@rem;
height: auto;
margin: auto;
position: fixed;
top: 50%;
left: 50%;
}
html图片展示特效.
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");
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。