百度换肤效果

 

<style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      li {
        list-style: none;
      }
      img {
        border: 0px;
        vertical-align: middle;
        width: 192px;
      }
      div {
        width: 768px;
        height: 120px;
      }
      div ul {
        overflow: hidden;
        background-color: pink;
        margin: 100px auto;
      }
      div ul li {
        float: left;
        width: 192px;
        height: 108px;
        cursor: pointer;
      }
      body {
        background: url(images/1.jpg) no-repeat center top;
      }
    </style>
  </head>
  <body>
    <div>
      <ul>
        <li><img src=/img/images/1.jpg></li>
        <li><img src=/img/images/2.jpg></li>
        <li><img src=/img/images/3.jpg></li>
        <li><img src=/img/images/4.jpg></li>
      </ul>
    </div>
    <script>
      var img = document.querySelector("ul").querySelectorAll("img");
      for (var i = 0; i < img.length; i++) {
        img[i].onclick = function () {
          document.body.style.backgroundImage = "url(" + this.src + ")";
        };
      }
    </script>

 

posted @ 2022-04-18 11:15  罗砂  阅读(36)  评论(0)    收藏  举报