仿百度换肤实例

Posted 2020-12-10 xiaojun6

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了仿百度换肤实例相关的知识，希望对你有一定的参考价值。

开始

技术图片

<!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>

以上是关于仿百度换肤实例的主要内容，如果未能解决你的问题，请参考以下文章

Android插件化的思考——仿QQ一键换肤,思考比实现更重要！

一个小时，零基础入门，看完这篇30行代码教你实现百度换肤！