轻松解决点击图片放大问题

最新推荐文章于 2024-11-01 15:19:31 发布

情丝千万丈

最新推荐文章于 2024-11-01 15:19:31 发布

阅读量2.5k

点赞数 1

分类专栏：图片放大文章标签： html js css

本文链接：https://blog.csdn.net/lh_mnbj/article/details/108442466

版权

图片放大专栏收录该内容

1 篇文章 0 订阅

订阅专栏

轻松解决点击图片放大问题
最近在做一个点击查看图片并且放大的功能，之前每次在做这个功能的时候，首先想到的时网上找插件，费时间费精力，索性自己写了一个图片放大的功能，代码很少，符合大部分的要求实现，避免以后遇到这样的功能还要去找，不如先记录下来，方便后续查看

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击图片放大</title>
</head>
<style type="text/css">
    .imgPreview {
        display: none;
        top: 0;
        width: 100%;
        height: 100%;
        position: fixed;
        background: rgba(0, 0, 0, 0.5);
    }

    .imgPreview img {
        z-index: 100;
        width: 600px;
        height: 600px;
        position: fixed;
        top: 50%;
        transform: translate(-50%, -50%);
        left: 50%;
    }
</style>
<body>
<img src="../static/img/a1.jpg" class="img">

<div class="imgPreview">
    <img src="#" alt="" id="imgPreview">
</div>
</body>
<script src="../static/js/jquery.min.js"></script>
<script type="text/javascript">
    $('.img').on('click', function () {
        var src= $(this).attr('src');
        $('.imgPreview img').attr('src', src);
        $('.imgPreview').show()
    });
    $('.imgPreview').on('click', function () {
        $('.imgPreview').hide()
    });
</script>
</html>