js 换肤功能

作者: 侯工 | 来源:发表于2018-07-14 15:02 被阅读19次

js 换肤功能
js换肤、js可控制换肤
再谈 Swift 换肤功能
JS-12day
iOS换肤功能的简单处理框架
个人博客—换肤
JS操作属性、JS换肤、JS操作style属性、JS操作clas
换肤功能
Android一键换肤功能实现
vue中的require与import之间的区别

源码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>demo</title>
        <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            /* 图片顶部无边距 */
            vertical-align: top;
        }
        body{
            background: url("images/img1.jpg") no-repeat;
            background-size: cover;
        }
        #div{
            background: rgba(255, 255, 255, 0.5);
        }
        #div ul{
            display: flex;
            justify-content: space-around;
            align-items: center;
            cursor: pointer;
        }
        #div ul li img{
            width: 180px;
            height: 120px;
            margin: 10px 0;
        }
        </style>
    </head>
    <body>
    <div id="div">
        <ul>
            <li><img src="images/img1.jpg" alt=""></li>
            <li><img src="images/img2.jpg" alt=""></li>
            <li><img src="images/img3.jpg" alt=""></li>
            <li><img src="images/img4.jpg" alt=""></li>
            <li><img src="images/img5.jpg" alt=""></li>
        </ul>
    </div>
    <script>
    window.onload = function(){
        //获取标签
        var div = document.getElementById("div");
        var allLi = div.getElementsByTagName("li");
        //遍历监听
        for(var i=0; i<allLi.length; i++){
            allLi[i].index = i+1;
            allLi[i].onclick = function(){
                document.body.style.background = 'url("images/img'+ this.index +'.jpg") no-repeat';
            }
        }
    }
    </script>
    </body>
</html>

本文所用到的图片：