js+css实现图片弹框并放大图片

Tips:虽然代码有点长，但是你只需要改掉一个图片链接再下载个jQuery.js就可以得到要展示的效果。

话不多说，先上效果图
点击图片之后会将图片放大1.5倍放大，背景遮罩层根据情况进行设置
在这里插入图片描述
今晚找了很多博客都讲不清楚，所以自己就动脑子想想怎么做吧。。。
然后，根据之前设置弹出框的思想，搞出这个图片的放大效果，也挺有成就感，但是代码还是太Low，需要系统学一下呀。。。

思路：
1.设置遮罩层div，遮罩层根据body和clientHeight取大值进行设置；
2.设置弹出框div，添加img标签；
3.获取图片的链接、高度、宽度等性质；
4.向弹出框中添加src链接并设置图片属性，显示完毕。

上代码，这里加入了jQuery：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script type="text/javascript" src="jquery-3.4.1.js"></script>
</head>
<style type="text/css">
    ul li{
        list-style: none;
    }
    #container{
        overflow: hidden;
    }
    #container img{
        transition: all 0.8s;
    }
    #container img:hover{
        transform: scale(1.03);
    }
    #layer{
        display: none;
        background-color: #B3B3B3;
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 10;
        -moz-opacity: 0.8;
        opacity:.80;
    }
    #popBox{
        display: none;
        z-index: 11;
        position:fixed;
        top:0;
        right:0;
        left:0;
        bottom:0;
        margin:auto;
    }
</style>
<script type="text/javascript">
    // $(function () {
    //     $('.bigImg').click(function () {
    //
    //     })
    // })
    function BigBig(src, width, height) {
        //获取body高度和宽度，当然是包括下拉框在内的长度
        var bkgWidth = document.body.clientWidth +'px';
        var bkgHeight = document.body.clientHeight + 'px';
        //获取可见高度
        var clientHeight = document.documentElement.clientHeight;

        if(clientHeight > document.body.clientHeight){
            bkgHeight = clientHeight + 'px';
        }else{
            bkgHeight = document.body.clientHeight + 'px';
        }

        var layer = document.getElementById('layer');

        $('#layer').css({"width":bkgWidth, "height":bkgHeight});

        var popBox = document.getElementById('popBox');
        var BigImage = document.getElementById('BigImage');
        layer.style.display = 'block';
        popBox.style.display = 'block';
        // var src = $('#Image1').attr("src")
        console.log(src)

        // var realwidth = $('#Image1').width();
        // var realheight = $('#Image1').height();
        var realwidth = width;
        var realheight = height;
        // console.log(realwidth)
        // console.log(realheight)
        // console.log(width)
        // console.log(height)

        var bigWidth = realwidth*1.5;
        var bigHeight = realheight*1.5;

        $('#BigImage').css({"width":bigWidth, "height":bigHeight})
        $('#BigImage').attr("src", src)

        var leftwidth = (document.body.clientWidth - realwidth*1.5)/2;
        var topheight = (clientHeight - realheight*1.5)/2
        BigImage.style.marginTop = topheight - 10 + 'px';
        BigImage.style.marginLeft = leftwidth + 'px';

        // console.log(bigWidth)
        // console.log(bigHeight)


    }
    function Close(){
        var layer = document.getElementById('layer');
        var popBox = document.getElementById('popBox');

        layer.style.display = 'none';
        popBox.style.display = 'none';
    }
</script>
<body>
<div id="layer">
</div>
<div id="popBox">
    <div>
        <a onclick="Close();" style="cursor: pointer;color: #2D2C3B;">关闭</a>
    </div>
    <img id="BigImage" src="" style="">
</div>
<div id="container">
    <img onclick="BigBig(this.src, this.width, this.height);" style="margin-left: 100px;width: 40%;" src="Image/1001181.jpg">
</div>
</body>
</html>

还是有点成就感的，，，，
多多点赞呀！！！！

PengEddie

发布了27 篇原创文章 · 获赞 3 · 访问量 2118

私信关注

js+css实现图片弹框并放大图片

猜你喜欢