利用排他思想做的换肤小案例分享

html部分:

    <ul class="huanfu">

        <li><img src="images/1.jpg"></li>

        <li><img src="images/2.jpg"></li>

        <li><img src="images/3.jpg"></li>

        <li><img src="images/4.jpg"></li>

    </ul>

css部分:

        * {

            margin: 0;

            padding: 0;

        }

        

        body {

            background: url(images/1.jpg) no-repeat center top;

        }

        

        li {

            list-style: none;

        }

        

        .huanfu {

            overflow: hidden;

            margin: 100px auto;

            background-color: #fff;

            width: 410px;

            padding-top: 3px;

        }

        

        .huanfu li {

            float: left;

            margin: 0 1px;

            cursor: pointer;

        }

        

        .huanfu img {

            width: 100px;

        }

 

js部分

        //  获取元素 

        var imgs = document.querySelector('.huanfu').querySelectorAll('img');

        //  循环注册 

        for (var i = 0; i < imgs.length; i++) {

            imgs[i].onclick = function() {

                // this.src 就是我们点击图片的路径   images/2.jpg

                // 把这个路径 this.src 给body 就可以了

                document.body.style.backgroundImage = 'url(' + this.src + ')';

            }

        }

 

后续会出jquery版本,更简单希望关注