百度皮肤

百度皮肤.jpg
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body {
            background: url(image/1.jpg) no-repeat;
        }
        .box {
            height: 165px;
            padding-top: 35px;
            text-align: center;
            background: rgba(255,255,255,0.3);
        }
        img {
            cursor: pointer;
            margin: 0 10px;
        }
    </style>
</head>
<body>
    <div class="box">
        ![](image/1.jpg)
        ![](image/2.jpg)
        ![](image/3.jpg)
        ![](image/4.jpg)
        ![](image/5.jpg)
    </div>

    <script>
        //需求：点击图片，body的背景图修改。
        //步骤：
        //1.获取事件源
        //2.绑定事件
        //3.书写事件驱动程序

        //1.获取事件源
        var box = document.getElementsByTagName("div")[0];
        //body的获取js内部帮我们优化完毕
        var body = document.body;
        var imgArr = box.children;
        //2.绑定事件
        for(var i=0;i<imgArr.length;i++){
            imgArr[i].index = i;
            imgArr[i].onclick = function () {
                //3.书写事件驱动程序
                //改body的背景
//                body.style.backgroundImage = "url(image/"+(this.index+1)+".jpg)";
                body.style.backgroundImage = "url("+this.src+")";
            }
        }
    </script>

</body>
</html>
推荐阅读更多精彩内容
