js百度换肤效果

js百度换肤效果

说明：点击想要的皮肤，就可使用该皮肤

效果图展示

代码如下

css样式代码

    <style>
        ul {
            width: 520px;
            margin: 50px auto;
            list-style: none;
        }
        
        li {
            width: 130px;
            height: 80px;
            float: left;
        }
        
        ul li img {
            width: 130px;
            height: 80px;
        }
        
        body {
            background: url(./images/1.jpg) no-repeat;
        }
    </style>

html、js代码

    <ul class="huanfu">
        <li><img src="./images/1.jpg" alt=""></li>
        <li><img src="./images/2.jpg" alt=""></li>
        <li><img src="./images/3.jpg" alt=""></li>
        <li><img src="./images/4.jpg" alt=""></li>
        <script>
            var imgs = document.querySelector('.huanfu').querySelectorAll('img');
            // console.log(imgs);
            for (var i = 0; i < imgs.length; i++) {
                imgs[i].onclick = function() {
                    // console.log(this.src);
                    document.body.style.backgroundImage = 'url(' + this.src + ')';
                }
            }
        </script>
    </ul>

结束。