图片点击放大（不用插件）

29图片点击放大（不用插件）

html

<!-- 图片放大开始 -->

<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.1);z-index:10000;width:100%;height:100%;display:none;">

<div id="innerdiv" style="position:absolute;left: 50%;top:100px;margin-left: -250px;">

<img id="bigimg" style="width: 500px;height: 300px;" src="" />

</div>

</div>

<!-- 图片放大结束 -->

js

//图片放大

$(".bigimage").on("click",".pimg",function(){

var src = $(this).attr("src")

$("#outerdiv").fadeIn("fast")

$("#bigimg").attr("src", src)

})

 

//隐藏放大图片

$("#outerdiv").click(function(){//再次点击淡出消失弹出层

$(this).fadeOut("fast");

});

转载于:https://www.cnblogs.com/MagicZhao123/p/11018846.html