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

全屏阅读
  • 基本信息
  • 作者:
  • 作者已发布:924篇文章
  • 发布时间:2023年06月20日 21:20:42
  • 所属分类:CSS, CSS3, html, javascript
  • 阅读次数:248次阅读
  • 标签:

一、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>

顶一下
(0)
100%
订阅 回复
踩一下
(0)
100%
» 郑重声明:本文由mpxq168发布,所有内容仅代表个人观点。版权归恒富网mpxq168共有,欢迎转载, 但未经作者同意必须保留此段声明,并给出文章连接,否则保留追究法律责任的权利! 如果本文侵犯了您的权益,请留言。

目前有 0 条留言 其中:访客:0 条, 博主:0 条

给我留言

您必须 [ 登录 ] 才能发表留言!