制作一个百度换肤效果

Posted 2021-03-23 牛耀民

tags:

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

原理就是获取到图片的src地址然后赋值给背景的URL地址

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            body{
                background: url(img/11.jpg) no-repeat ;
                /*background-size: 100% ;*/
            }
            ul{
                width: 200px;
                /*background: red;*/
                border: 1px solid pink;
                overflow: hidden;
                list-style: none;
                margin:300px auto;
            }
            ul li{
                float: left;
                /*background: red;*/
                width: 50%;
                margin-top: 5px;
                /*cursor:wait;*/
            }
            ul li img{
                width: 100px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li><img src="img/2.jpeg"/></li>
            <li><img src="img/3.jpg"/></li>
            <!--<li><img src="img/2.jpeg"/></li>
            <li><img src="img/3.jpg"/></li>-->
        </ul>
        <script type="text/javascript">
            var img = document.querySelector("ul").querySelectorAll("img")
            for (var i=0; i<img.length; i++) {
                img[i].onclick = function() {
//                    console.log(this.src)
                document.body.style.backgroundImage = "url("+this.src+")";
                }
            }
        </script>
    </body>
</html>

页面效果

点击之前

点击之后

以上是关于制作一个百度换肤效果的主要内容，如果未能解决你的问题，请参考以下文章

网页换肤效果系统界面切换皮肤样式

[EasyUI美化换肤]更换EasyUi图标