图片点击放大(不用插件)
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");
});