正文
jQuery实现点击图片简单放大效果
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
一、HTML代码如下：
<img class="comment_pics" width="50px" height="50px" src="img/01.jpg"/><div class="bg">
<img class="bgImg" style="max-width: 100%; max-height: 100%; position: fixed;" src="">
</div>
二、CSS代码如下：
.fillbg { background-color: rgba(0, 0, 0, 0.6); bottom:; height: 100%; left:; opacity:; position: fixed; right:; top:; width: 100%; z-index:; display:none; }
.fillbg-active { opacity:; display:block; }
三、jQuery代码如下：
<script>
var newImg;
var clientH=$(window).height();
var clientW=$(window).width();
var w = '250';
var h = '250';
$(document).ready(function(){
$(".comment_pics").bind("click", function(){
newImg = $(this)[0].src;
$("body").append('<div class="fillbg"></div>');
$(".fillbg").addClass("fillbg-active");
$('.bgImg').css({'width': w+"px",'height': h+"px",'top':(clientH-h)/2+"px",'left':(clientW-w)/2+"px",'z-index':1101});
$('.bgImg').attr("src",newImg);
}); $(".bgImg").bind("click", function(){
$(".fill-input").removeClass("fill-input-active");
setTimeout(function(){
$(".fillbg-active").removeClass("fillbg-active");
$(".fillbg").remove();
},300);
$('.bgImg').css({'width': '0px','height': '0px'});
$('.bgImg').attr("src",'');
});
});
</script>
