换肤效果

最新推荐文章于 2023-08-29 20:03:14 发布

弄玉x

最新推荐文章于 2023-08-29 20:03:14 发布

阅读量148

点赞数

分类专栏： js 文章标签： js html css

本文链接：https://blog.csdn.net/m0_46069861/article/details/107542121

版权

js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>换肤效果</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        background:url(1.png) no-repeat center center fixed;
        background-size : cover;

    }
    li{
        list-style: none;
    }
    .baidu{
        overflow: hidden;
        margin: 100px auto;
        background-color: #ffffff;
        width: 310px;
        padding-top: 3px;
    }
    .baidu li{
        float: left;
        margin: 0 1px;
    }
    .baidu img{
        width: 100px;
        height: 100px;
    }
    </style>
</head>
<body>
<ul class="baidu">
    <li><img src="1.png"></li>
    <li><img src="2.jpg"></li>
    <li><img src="3.png"></li>
</ul>
<script>
   var imgs = document.querySelector('.baidu').querySelectorAll('img'); 
   for(let i=0; i<imgs.length; i++){
      imgs[i].onclick =function(){
          document.body.style.backgroundImage = 'url('+this.src+')';
      }
   }
</script>
</body>
</html>