jQuery实现点击图片简单放大效果-博客园

jQuery实现点击图片简单放大效果

2019-05-22 16:03:06 发布 676 浏览

页面报错/反馈

已收藏点赞

一、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: 0; height: 100%; left: 0; opacity: 0; position: fixed; right: 0; top: 0; width: 100%; z-index: 1100; display:none; }
.fillbg-active { opacity: 1; display:block; }

三、jQuery代码如下：

'); $(".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",''); }); });

登录查看全部

参与评论

jQuery实现点击图片简单放大效果

参与评论

评论留言

还没有评论留言，赶紧来抢楼吧~~

给这篇文章打个标签吧~