孙肖宁

javascript实现网页背景的切换
描述:当用户点击背景的时候,背景进行切换示例代码:(图片换成自己的路径哦)<!DOCTYPE html>...
扫描右侧二维码阅读全文
02
2018/04

javascript实现网页背景的切换

描述:当用户点击背景的时候,背景进行切换
示例代码:(图片换成自己的路径哦)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>皮肤更换</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    body{
        background: url("./images/1.jpg") no-repeat;
    }
    .box{
        height: 165px;
        padding-top: 35px;
        text-align: center;
        background: rgba(255,255,255,0.3);
    }
    img{
        width: 200px;
        cursor: pointer;
        margin: 0 10px;
    }
</style>
<body>
    <div class="box">
        <img src="./images/1.jpg" alt="">
        <img src="./images/2.jpg" alt="">
        <img src="./images/3.jpg" alt="">
        <img src="./images/4.jpg" alt="">
        <img src="./images/5.jpg" alt="">
    </div>
</body>
</html>
<script>
    var box = document.getElementsByTagName("div")[0];
    var body = document.body;
    var imgArr = box.children;
    for (var i = 0;imgArr.length;i++){
        imgArr[i].index = i;
        imgArr[i].onclick = function () {
            body.style.backgroundImage = "url("+this.src+")";
        }
    }
</script>
Last modification:April 2nd, 2018 at 01:04 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment