jQuery实现点击图片简单放大效果
程序员文章站
2024-01-06 10:47:34
一、HTML代码如下: 二、CSS代码如下: 三、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: 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代码如下:
<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>