js 点击放大图片

阴元青
2023-12-01
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>点击放大图片</title>
</head>

<body>
    <style type="text/css">
        #mask {
            margin: 0;
            padding: 0;
            border: none;
            width: 100%;
            height: 100%;
            background: #333;
            opacity: 0.6;
            filter: alpha(opacity=60);
            z-index: 9999;
            position: fixed;
            top: 0;
            left: 0;
            display: none;
        }

        #big {
            width: 100%;
            height: 100%;
            display: block;

        }

        #bigimg {
            position: fixed;
            left: 50%;
            top: 50%;
            z-index: 999999;
            transform: translate(-50%, -50%);
            border: 20px black solid;
        }

        #tip {
            position: fixed;
            left: 50%;
            top: 50%;
            z-index: 999999;
            transform: translate(-50%, -50%);
            font-size: 3rem;
            color: white;
        }

        #tip>p {
            background: #808080de;
            width: 12rem;
            height: 3rem;
            padding-top: 1.5rem;
        }

        #x {
            position: absolute;
            color: white;
            font-size: 21px;
            cursor: pointer;
            right: -50px;
            top: -45px;
            background: #808080c2;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
        }

        .ims {
            width: 100%;
            height: 100%;
        }
    </style>
    <img src="https://img14.360buyimg.com/n0/jfs/t21220/78/2216674102/160200/f1597097/5b4c1b2aN5e545180.jpg.avif"
        onclick="img(this.src)" >
    <!-- 图片放大 阴影层 -->
    <div id="mask" style="display: none;">
    </div>
    <div id="bigimg" style="display: none">
        <div id="x">X</div><img src="" alt="" id="big">
    </div>
    <div id="tip" style="display: none;">
        <p>暂无图片</p>
    </div>
</body>
<script type="text/javascript">
    function img(src) {
        /
        /获取自定义属性///
        onclick(this)///
        //getAttribute(src.getAttribute('big'))//
        
        var img = document.getElementById('big');
        img.src = src;
        if (img.src == undefined || src.length < 15) {
            //图片没有的时候显示的提示语
            document.getElementById('tip').style.display = 'block';
            //延迟操作
            setTimeout("document.getElementById('tip').style.display = 'none'", 1500);
            return false;
        }
        var bigimg = document.getElementById('bigimg');
        var mask = document.getElementById('mask');
        var xx = document.getElementById('x');
        if (getCss(bigimg, "display") == 'none' && getCss(mask, "display") == 'none') {
            bigimg.setAttribute('style', 'display:block');
        }
        xx.onclick = function () {
            bigimg.setAttribute('style', 'display:none');
            img.src = '';
        }
    }

    //获取样式
    function getCss(curEle, attr) {
        var val = null;
        try { //兼容ie做法
            val = window.getComputedStyle(curEle, null)[attr];
        } catch (e) {
            val = curEle.currentStyle[attr];
        }
        return val;
    }
</script>

</html>
js 点击放大图片

相关阅读

相关文章

相关问答

相关文档
