学习如何使用html和css样式将两张图片叠加到另一张图片上,实现微信扫一扫二维码效果

学习如何使用html和css样式将两张图片叠加到另一张图片上,实现微信扫一扫二维码效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="menuStyle.css"/>
    <title>二维码扫一扫</title>
</head>

<style>
    .top {
     
     
        position: absolute;
        z-index: 1;
        margin-top: 1%;
        margin-left: -280px;
        transition: background-color 300ms;
        transition-property: background-color;
        transition-duration: 300ms;
        transition-timing-function: ease;
        transition-delay: 0s;
    }

</style>
<body>
<div>

    <a href="#"><img src='image/wenku_login.jpg' width="300" height="300"></a>
    <a href="#"><img id="qrcode_saoyisao" class="top" src='image/saoyisao.png' width="300" height="300"></a>

</div>


<script src="image/jquery.js" type='text/javascript'></script>
</body>

<script type="text/javascript">

    //赋值扫一扫
    function scanPic() {
     
     
        $("#qrcode_saoyisao").attr('src', 'image/saoyisao.png');
    }

    // 设置定时器
    (function () {
     
     
        // 两秒调用一次
        let scanTime = 3 * 1000;
        // console.log(topTime);
        setInterval("scanPic()", scanTime);

    })();

</script>

</html>

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/guo_qiangqiang/article/details/123349289