百度换皮肤效果

最新推荐文章于 2022-07-13 14:35:47 发布

dcw43465

最新推荐文章于 2022-07-13 14:35:47 发布

阅读量95

点赞数 1

原文链接：http://www.cnblogs.com/sj1988/p/6590397.html

版权

<!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" id="box">
        <img src="image/1.jpg" alt="" width="200px"/>
        <img src="image/2.jpg" alt="" width="200px"/>
        <img src="image/3.jpg" alt="" width="200px"/>
        <img src="image/4.jpg" alt="" width="200px"/>
        <img src="image/5.jpg" alt="" width="200px"/>
    </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>

转载于:https://www.cnblogs.com/sj1988/p/6590397.html

dcw43465

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度换皮肤效果

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; ...
复制链接

扫一扫