JavaScript案例（四）：切换背景

最新推荐文章于 2023-07-24 20:45:27 发布

@彼岸花

最新推荐文章于 2023-07-24 20:45:27 发布

阅读量173

点赞数

分类专栏： JAVA开发文章标签： js css html javascript

本文链接：https://blog.csdn.net/weixin_44825185/article/details/115192914

版权

JAVA开发专栏收录该内容

34 篇文章 0 订阅

订阅专栏

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>换皮肤</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #sketch{
            background-color: rgba(255, 255, 255, 0.5);
            width: 400px;
            height: 58px;
            margin-left: 47px;
        }
        ul{
            list-style: none;

        }
        ul li img{
            width: 75px;
            float: left;
            margin-top: 10px;
            margin-left: 20px;
            cursor: pointer;
        }
        #bg{
            z-index: -1;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<div id="sketch">
    <ul>
        <li>
            <img src="./image/yt01.jpg" alt="">
        </li>
        <li>
            <img src="./image/yt02.jpg" alt="">
        </li>
        <li>
            <img src="./image/yt03.jpg" alt="">
        </li>
        <li>
            <img src="./image/yt04.jpg" alt="">
        </li>
    </ul>
</div>
<div id="bg">
    <img src="./image/yt02.jpg" alt="" id="bgimg">
</div>
<script>
    var bgimg = document.getElementById("bgimg");
    var sketchs = document.getElementsByTagName("img");
    for (var i =0; i < sketchs.length; i++) {
        sketchs[i].onclick = function(){
            var smallimgsrc = this.getAttribute('src');
            // document.write(smallimgsrc);
            // bgimg.setAttribute("src","./image/yt0"+i+".jpg");
            bgimg.setAttribute("src",smallimgsrc)
        };

    }
</script>
</body>
</html>

结果

在这里插入图片描述

@彼岸花

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript案例（四）：切换背景

代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>换皮肤</title> <style> *{ padding: 0; margin: 0; } #sketch{ background-c
复制链接

扫一扫

专栏目录