运用html css javascript实现按钮变换图片

最新推荐文章于 2024-03-06 23:02:33 发布

小韦的案例小窝

最新推荐文章于 2024-03-06 23:02:33 发布

阅读量197

点赞数

本文链接：https://blog.csdn.net/weiyuyang250/article/details/120711627

版权

JavaScript HTML 图片切换背景图片事件处理

关键词由CSDN通过智能技术生成

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<style>

    *{

        padding: 0;

        margin: 0;

    }

    body{

        background: url(images/俯瞰图.jpg) no-repeat center top;

    }

    ul{

        display: flex;

        justify-content: space-between;

        list-style: none;

        overflow: hidden;

        margin: 100px auto;

        width: 410px;

        padding-top: 3px;

    }

    li{

        cursor: pointer;

    }

    img{

        width: 100px;

    }

</style>

<body >

<ul>

    <li><img src="images/俯瞰图.jpg" alt=""></li>

    <li><img src="images/博物馆.jpg" alt=""></li>

    <li><img src="images/天安门.jpg" alt=""></li>

    <li><img src="images/电视台.jpg" alt=""></li>

</ul>

<script>

    var btns=document.getElementsByTagName('img');

    for(var i=0;i<btns.length;i++){

        btns[i].onclick=function (){

            document.body.style.background='url('+this.src+')';

        }

    }

</script>

</body>

</html>

小韦的案例小窝

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
运用html css javascript实现按钮变换图片

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&...
复制链接

扫一扫