jQuery图片点击放大效果,带关闭按钮
  • 分享到微信朋友圈
    X
立即下载 查看演示

网页图片点击放大效果是客户常见的需求， 能提高用户体验，还能使图片展示更为丰富。本文将详细讲解如何用 jQuery 实现点击放大图片的效果。

关键技术点

  • 定义图片点击事件

  • 图片点击后放大层弹出

  • 定义图片标签和关闭按钮，将路径赋值img src

  • 设置big-img元素内容

  • 关闭按钮赋于点击事件 点击关闭按钮 放大层关闭

关键代码与说明

<script>

    //图片点击事件
    $(".img-code").click(function () {

        //显示放大层弹出
        $(".big-img").show();
        //获取图片路径
        var imgSrc = $(this).find("img").attr("src");
        console.log(imgSrc)
        //定义图片标签和关闭按钮，将路径赋值img src
        text = "<img src='" + imgSrc + "' style='width: 600px;  height: auto; margin-top:10%;'><span class='closed'>[关闭]</span>"
        //设置big-img元素内容
        $(".big-img").html(text);

    })

    //关闭按钮赋于点击事件 点击关闭按钮 放大层关闭
    $(".big-img").on("click", ".closed", function () {
        //放大层关闭后
        $(".big-img").hide();
    })

</script>