百度换肤效果

最新推荐文章于 2024-03-06 23:02:33 发布

休思_J

最新推荐文章于 2024-03-06 23:02:33 发布

阅读量352

点赞数

本文链接：https://blog.csdn.net/weixin_47336808/article/details/106419215

版权

百度换肤效果

点击小图片，切换网页背景图片

代码验证

<style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background: url("../imgs/11.jpg");
            /*设置背景图片的大小*/
            /* cover:与contain刚好相反，背景图片会按比例缩放自 适应整个背景区域，如果背景区域不足以包含所有背景图片，图片内容会溢出 */
            background-size: cover;
            /*设置position*/
            background-position: center;
        }
        li {
            list-style: none;
        }
        .baidu {
            overflow: hidden;
            background-color: #fff;
            width: 410px;
            padding-top: 3px;
            margin: 150px auto;
        }
        .baidu li {
            float: left;
            margin: 0 1px;
            cursor: pointer;
        }
        .baidu img {
            width: 100px;
        }
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
    <ul class="baidu">
        <li><img src="../imgs/11.jpg"></li>
        <li><img src="../imgs/22.jpg"></li>
        <li><img src="../imgs/33.jpg"></li>
        <li><img src="../imgs/44.jpg"></li>
        <div class='clear'></div>
    </ul>
    <script>
        // 1. 获取元素
        var imgs = document.querySelector('.baidu').querySelectorAll('img');
        // 2. 循环注册事件
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function() {
                // this.src 就是我们点击图片的路径 
                // 把这个路径给body
                document.body.style.backgroundImage = 'url(' + this.src + ')';
            }
        } 
    </script>

运行效果

在这里插入图片描述

总结

利用排他思想和JS属性获取与修改完成百度换肤效果

休思_J

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
百度换肤效果

百度换肤效果点击小图片，切换网页背景图片代码验证<style> * { margin: 0; padding: 0; } body { background: url("../imgs/11.jpg"); /*设置背景图片的大小*/ /* cover:与contain刚好相反，背景图片会按比例缩放自适应整个背景区域，如果背
复制链接

扫一扫