给网页换皮肤

最新推荐文章于 2024-04-01 21:28:03 发布

沐梓沐囡

最新推荐文章于 2024-04-01 21:28:03 发布

阅读量327

点赞数 1

分类专栏： js css js特效文章标签： js 换皮肤 skin javascript

本文链接：https://blog.youkuaiyun.com/yy_9_aa/article/details/78133970

版权

js 同时被 3 个专栏收录

3 篇文章

订阅专栏

js特效

3 篇文章

订阅专栏

css

2 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>为你的网页换个衣服吧</title>
    <style   type="text/css">
        * {
            padding: 0;
            margin: 0;
            text-align: center;
        }
        body {
            background: url(img2/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">
    <img src="img2/1.jpg" alt="" width="200px"/>
    <img src="img2/2.jpg" alt="" width="200px"/>
    <img src="img2/3.jpg" alt="" width="200px"/>
    <img src="img2/4.jpg" alt="" width="200px"/>
    <img src="img2/5.jpg" alt="" width="200px"/>
</div>
<script     type="text/javascript">
     var  box=document.getElementsByTagName("div")[0];
     var  body=document.body;
     var  imgArr=box.children;
    for(var i=0;i<imgArr.length;i++){
        imgArr[i].onclick=function(){
            body.style.backgroundImage="url("+this.src+")"
        }
    }
</script>
</body>
</html>