欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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>

 

上一篇:

下一篇: