仿百度换肤实例

开始

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>换肤</title>
        <style type="text/css">
            body{ background-image: url(http://img04.sogoucdn.com/app/a/100520146/ebc04922ea94fd7be2f11946102493d2);}
            ul,li{ list-style: none; margin: 15px;}
            .baidu{}
        </style>
    </head>
    <body>
        <ul class="baidu">
            <li><img src="http://img04.sogoucdn.com/app/a/100520146/ebc04922ea94fd7be2f11946102493d2" width="100px" height="100px"></li>
            <li><img src="http://img03.sogoucdn.com/app/a/100520146/524ade47b69439c7ba03184e55d3ec6e" width="100px" height="100px"></li>
            <li><img src="http://img02.sogoucdn.com/app/a/100520146/0a9075a03657256c5d33afc1bdf19de0" width="100px" height="100px"></li>
            <li><img src="http://img02.sogoucdn.com/app/a/100520146/cb2ac622c4ba7d259f8d96a740e41936" width="100px" height="100px"></li>
        </ul>
        <script>
            var imgs = document.querySelector(".baidu").querySelectorAll("img");
            //2. 循环注册事件
            for (var i =0; i < imgs.length; i++){
                imgs[i].onclick = function(){
                    //this.src 就是我们点击图片的路径 
                    //把这个路径 this.src 给body 就可以了
                    document.body.style.backgroundImage = 'url('+ this.src +')';
                }
            }
        </script>
    </body>
</html>

 

posted @ 2020-06-12 11:56  君莫笑007  阅读(328)  评论(0)  编辑  收藏  举报