本篇文章主要讲述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></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>

本文由职坐标整理发布，学习更多的相关知识，请关注职坐标IT知识库！