html+js 点击图片放大、点击图片全屏

时而有事儿

已于 2023-06-20 17:45:40 修改

阅读量6.8k

点赞数 5

文章标签： html javascript 前端

于 2022-10-12 11:21:24 首次发布

本文链接：https://blog.csdn.net/w981912536/article/details/127279060

版权

html 点击图片放大，图片全屏，再点击关闭全屏，我这里直接整理成一个js，使用方便。
使用步骤：
1、引用 jq

2、引用 imgEnlarge.js。

3、没了。

直接上代码，这个是测试代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/imgEnlarge.js"></script>

</head>
<body>

<img src="http://img2.3png.com/f2635dd311d3c96633ea4a7e2adeaf3cedbd.png" alt="" style="width: 50px;">

</body>
</html>

这个是imgEnlarge.js

// 依赖jq 默认点击<img>标签就会放大，可根据自己情况修改

$(document).ready(function () {
    $("body").append("<!--放大图片-->\n" +
        "<div class=\"blackScreen\" style=\"display: none;display:none;    position:fixed;    top:0;    right:0;    bottom:0;    left:0;    background-color:#000000;    z-index:1000;\">\n" +
        "    <span class=\"fullScreenImg\" style='position:absolute;    top:0;    right:0;    bottom:60px;    left:0;    background:center center no-repeat;    background-size:contain;'></span>\n" +
        "</div>");
});

$(function () {

// 放大图片
    $('img').on('click', function () {
        // console.log("放大");
        if (this.getAttribute("src") != "url(\"null\") 0% 0% / 100% no-repeat") {
            $(".fullScreenImg").css("background-image", "url(\"" + this.getAttribute("src") + "\")");
            $(".blackScreen").fadeIn(100);
        }
    });

// 关闭放大图片
    $(".blackScreen").on("click", function () {
        // console.log("关闭");
        $(".blackScreen").fadeOut(100);
    });

});

代码写的丑，凑合看吧，又不是不能用。

最后如果对你有一点点帮助，麻烦支持一下。

全国寄快递5元起，电影票8.8折。更多优惠微信关注公众号：【折价寄件】

感谢阅读！！！！