jQuery实现点击图片简单放大效果
Posted phperlinxinlan
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>
以上是关于jQuery实现点击图片简单放大效果的主要内容,如果未能解决你的问题,请参考以下文章