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

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

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

2、引用 imgEnlarge.js。

3、没了。

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

<!DOCTYPE html>
<html>
<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);
    });
 
});

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

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

给我留言

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