川剧变脸娃娃

最新推荐文章于 2024-07-29 12:39:10 发布

望京十三兄

最新推荐文章于 2024-07-29 12:39:10 发布

阅读量240

点赞数

分类专栏： JSCool

本文链接：https://blog.csdn.net/qq_27401917/article/details/105469950

版权

JSCool 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .big {
      width: 200px;
      height: 200px;
      margin: 100px auto;
    }

    ul {
      width: 100px;
      height: 100px;
      border: 1px solid black;
      position: relative;
      overflow: hidden;
    }

    li {
      position: absolute;
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
    }

    .color1 {
      background: red url('https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=88921570,1978236051&fm=26&gp=0.jpg') no-repeat top left/100% 100%;

    }

    .color2 {
      background: yellow url('https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=83957109,3897176996&fm=26&gp=0.jpg') no-repeat top left/100% 100%;

    }

    .color3 {
      background: pink url('https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2233981312,3019727382&fm=26&gp=0.jpg') no-repeat top left/100% 100%;

    }

    .color4 {
      background: green url('https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3032040546,1208169455&fm=26&gp=0.jpg') no-repeat top left/100% 100%;
    }

    .input1 {
      width: 30px;
      height: 30px;
      margin: 10px;
      position: absolute;
      top: 150px;
      left: 550px;
    }

    .input2 {
      width: 30px;
      height: 30px;
      margin: 10px;
      position: absolute;
      top: 150px;
      left: 590px;
    }
  </style>
</head>

<body>
  <div class="big">
    <ul>
      <li class="color1" style="top:0;">1</li>
      <li class="color2" style="top:100px;">2</li>
      <li class="color3" style="top:200px;">3</li>
      <li class="color4" style=" top:-100px;">4</li>
    </ul>
    <input class="input1" type="button" value="上翻">
    <input class="input2" type="button" value="下翻">
  </div>
  <script>
    window.onload = function () {
      var oIpt1 = document.getElementsByTagName("input")[0];
      var oIpt2 = document.getElementsByTagName("input")[1];
      var allColor = document.getElementsByTagName("li");
      oIpt2.addEventListener("click", function () {
        for (var i = 0; i < allColor.length; i++) {
          allColor[i].style.top = parseFloat(allColor[i].style.top) - 100 + "px";
          allColor[i].style.transition = .1 + "s"
          if (allColor[i].style.top == -300 + "px") {
            allColor[i].style.top = 100 + "px"
            allColor[i].style.transition = 0 + "s"
          }
        }
      }, false)
      oIpt1.addEventListener("click", function () {
        for (var i = 0; i < allColor.length; i++) {
          allColor[i].style.top = parseFloat(allColor[i].style.top) + 100 + "px";
          allColor[i].style.transition = .1 + "s"
          if (allColor[i].style.top == 400 + "px") {
            allColor[i].style.top = 0 + "px"
            allColor[i].style.transition = 0 + "s"
          }
        }
      }, false)
    }
  </script>
</body>

</html>

望京十三兄

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
川剧变脸娃娃

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; list-styl...
复制链接

扫一扫

专栏目录