Question

我已经在网上搜寻了所有偶然发现的资源，但都没有解决我的问题。单击红色圆圈时，我需要土耳其跳。这是我的代码。顺便说一句，它是在js html和CSS中。

function animate() {
  document.getElementById("body").class = "bodyAnim";
  document.getElementById("beak").class = "beakAnim";
  document.getElementById("eyes").class = "eyesAnim";
  document.getElementById("pupils").class = "pupilsAnim";
  document.getElementById("tail").class = "tailAnim";
  document.getElementById("snood").class = "snoodAnim";
  document.getElementById("legRight").class = "legRightAnim";
  document.getElementById("legLeft").class = "legLeftAnim";
}

.body {
  padding: 30px 30px;
  height: 35px;
  width: 5px;
  border-radius: 50%;
  background-color: brown;
  position: relative;
  top: 0px;
  animation-name: turkey;
  animation-duration: 1s; 
}
.beak {
  padding: 1px 1px;
	width: 1px;
	height: 1px;
	border-top: 10px solid transparent;
	border-left: 25px solid #ffc800;
	border-bottom: 5px solid transparent;
  position: relative;
  left: 40px;
  top: 40px;
  animation-name: beak;
  animation-duration: 1s;
}
.eyes {
  padding: 10px 10px;
  width: 10px;
  height:10px;
  border-radius: 50%;
  background-color: white;
  position: relative;
  top: -80px;
  animation-name: eyes;
  animation-duration: 1s;
}
.pupils {
  padding: 5px 5px;
  width: 3px;
  height: 3px;
   border-radius: 50%;
  background-color:black;
  position: relative;
  top:-100px;
  animation-name: pupils;
  animation-duration: 1s;
}
.snood {
  padding: 5px 5px;
  width: 1px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
  position: relative;
  top: -254px;
  right: -38px;
  animation-name: snood;
  animation-duration: 1s;
}
.legRight {
  padding: 10px 1px;
  width: 1px;
  height: 5px;
  background-color: black;
  position: relative;
  top: -219px;
  right: 9px;
  transform: rotate(30deg);
  animation-name: legRight;
  animation-duration: 1s;
}
.legLeft {
  padding: 10px 1px;
  width: 1px;
  height: 5px;
  background-color: black;
  position: relative;
  top: -242px;
  left: 3px;
  transform: rotate(30deg);
  animation-name: legLeft;
  animation-duration: 1s;
}
.obstacle {
  height: 100px;
  width: 10px;
  background-color: black;
  animation: obstacle 2.2s infinite;
  position: relative;
  top: -460px;
}
body {
  background-color: lightblue;
}

<center>
  <br><br><br><br><br><br>
  <div class="turkey">
    <tr>
      <td>
        <div class="turkey beak"></div>
      </td>
      <td>
        <div class="turkey body"></div>
      </td>
    </tr>
    <div class="turkey eyes"></div>
    <div class="turkey pupils"></div>
    <style>
      .tail {
        width: 20px;
        height: 150px;
        border-radius: 50%;
        background-color: brown;
        position: relative;
        top: -200px;
        right: 59px;
        transform: rotate(-30deg);
        animation-name: tail;
        animation-duration: 1s;
      }
    </style>
    <div class="turkey tail" id="tailId"></div>
    <div class="turkey snood"></div>
    <div class="turkey legRight"></div>
    <div class="turkey legLeft"></div>
  </div>
  <style>
    @keyframes turkey {
      0% {
        top: 0px;
      }
      50% {
        top: -200px;
      }
      100% {
        top: 0px;
      }
    }

    @keyframes beak {
      0% {
        top: 40px;
      }
      50% {
        top: -160px;
      }
      100% {
        top: 40px;
      }
    }

    @keyframes eyes {
      0% {
        top: -80px;
      }
      50% {
        top: -280px;
      }
      100% {
        top: -80px;
      }
    }

    @keyframes pupils {
      0% {
        top: -100px;
      }
      50% {
        top: -300px;
      }
      100% {
        top: -100px
      }
    }

    @keyframes snood {
      0% {
        top: -250px;
      }
      50% {
        top: -450px;
      }
      100% {
        top: -250px;
      }
    }

    @keyframes legRight {
      0% {
        top: -219px;
      }
      50% {
        top: -419px;
      }
      100% {
        top: -219px;
      }
    }

    @keyframes legLeft {
      0% {
        top: -242px;
      }
      50% {
        top: -442px;
      }
      100% {
        top: -242px;
      }
    }

    @keyframes tail {
      0% {
        top: -200px;
      }
      50% {
        top: -400px;
      }
      100% {
        top: -200px;
      }
    }
  </style>
  <style>
    .button {
      height: 100px;
      width: 100px;
      background-color: red;
      border-radius: 50%;
      position: relative; 
      top:-210px;
      overflow = scroll;
    }
  </style>
  <div class="button" onclick="animate()"><h1>JUMP</h1></div>
  <div class="obstacle"></div>
  <style>
    @keyframes obstacle {
      from {
        left: 370px;
      }
      to {
        left: -870px;
      }
    }
  </style>

因此，重申一下我的问题：如何使土耳其在点击时跳跃。因此，从技术角度来讲，我如何通过onclick激活关键帧。最后，如果我的代码看起来很奇怪，请告诉我。每个人都在说，请修复您的代码，但我不知道如何。

Answer 1

好吧，所以我不为自己所做的事情感到骄傲，但是我做了一些必要的事情（例如添加id属性并重命名该函数），然后将classList.toggle包装在setTimeout并成功。大声笑。请理解，这确实是使土耳其跳跃的真正不好的方法，但是出于您所提问题的目的，我让代码起作用了。

<html>

<head>
  <style>
    .body {
  padding: 30px 30px;
  height: 35px;
  width: 5px;
  border-radius: 50%;
  background-color: brown;
  position: relative;
  top: 0px;
  animation-name: turkey;
  animation-duration: 1s; 
}
.beak {
  padding: 1px 1px;
    width: 1px;
    height: 1px;
    border-top: 10px solid transparent;
    border-left: 25px solid #ffc800;
    border-bottom: 5px solid transparent;
  position: relative;
  left: 40px;
  top: 40px;
  animation-name: beak;
  animation-duration: 1s;
}
.eyes {
  padding: 10px 10px;
  width: 10px;
  height:10px;
  border-radius: 50%;
  background-color: white;
  position: relative;
  top: -80px;
  animation-name: eyes;
  animation-duration: 1s;
}
.pupils {
  padding: 5px 5px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color:black;
  position: relative;
  top:-100px;
  animation-name: pupils;
  animation-duration: 1s;
}
.snood {
  padding: 5px 5px;
  width: 1px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
  position: relative;
  top: -254px;
  right: -38px;
  animation-name: snood;
  animation-duration: 1s;
}
.legRight {
  padding: 10px 1px;
  width: 1px;
  height: 5px;
  background-color: black;
  position: relative;
  top: -219px;
  right: 9px;
  transform: rotate(30deg);
  animation-name: legRight;
  animation-duration: 1s;
}
.legLeft {
  padding: 10px 1px;
  width: 1px;
  height: 5px;
  background-color: black;
  position: relative;
  top: -242px;
  left: 3px;
  transform: rotate(30deg);
  animation-name: legLeft;
  animation-duration: 1s;
}
.obstacle {
  height: 100px;
  width: 10px;
  background-color: black;
  animation: obstacle 2.2s infinite;
  position: relative;
  top: -460px;
}
body {
  background-color: lightblue;
}
    </style>
</head>

<body>
  <center>
    <br><br><br><br><br><br>
    <div class="turkey">


      <div id="beak" class="turkey beak"></div>


      <div id="body" class="turkey body"></div>


      <div id="eyes" class="turkey eyes"></div>
      <div id="pupils" class="turkey pupils"></div>
      <style>
        .tail {
        width: 20px;
        height: 150px;
        border-radius: 50%;
        background-color: brown;
        position: relative;
        top: -200px;
        right: 59px;
        transform: rotate(-30deg);
        animation-name: tail;
        animation-duration: 1s;
      }
    </style>
      <div id="tail" class="turkey tail" id="tailId"></div>
      <div id="snood" class="turkey snood"></div>
      <div id="legRight" class="turkey legRight"></div>
      <div id="legLeft" class="turkey legLeft"></div>
    </div>
    <style>
      @keyframes turkey {
      0% {
        top: 0px;
      }
      50% {
        top: -200px;
      }
      100% {
        top: 0px;
      }
    }

    @keyframes beak {
      0% {
        top: 40px;
      }
      50% {
        top: -160px;
      }
      100% {
        top: 40px;
      }
    }

    @keyframes eyes {
      0% {
        top: -80px;
      }
      50% {
        top: -280px;
      }
      100% {
        top: -80px;
      }
    }

    @keyframes pupils {
      0% {
        top: -100px;
      }
      50% {
        top: -300px;
      }
      100% {
        top: -100px
      }
    }

    @keyframes snood {
      0% {
        top: -250px;
      }
      50% {
        top: -450px;
      }
      100% {
        top: -250px;
      }
    }

    @keyframes legRight {
      0% {
        top: -219px;
      }
      50% {
        top: -419px;
      }
      100% {
        top: -219px;
      }
    }

    @keyframes legLeft {
      0% {
        top: -242px;
      }
      50% {
        top: -442px;
      }
      100% {
        top: -242px;
      }
    }

    @keyframes tail {
      0% {
        top: -200px;
      }
      50% {
        top: -400px;
      }
      100% {
        top: -200px;
      }
    }
  </style>
    <style>
      .button {
      height: 100px;
      width: 100px;
      background-color: red;
      border-radius: 50%;
      position: relative; 
      top:-210px;
      overflow = scroll;
    }
  </style>
    <div class="button" onclick="jump()">
      <h1>JUMP</h1>
    </div>
    <div class="obstacle"></div>
    <style>
      @keyframes obstacle {
      from {
        left: 370px;
      }
      to {
        left: -870px;
      }
    }
  </style>

  </center>
  <script type="text/javascript">
    function jump() {
      document.getElementById("body").classList.toggle("body");
      document.getElementById("beak").classList.toggle("beak");
      document.getElementById("eyes").classList.toggle("eyes");
      document.getElementById("pupils").classList.toggle("pupils");
      document.getElementById("tail").classList.toggle("tail");
      document.getElementById("snood").classList.toggle("snood");
      document.getElementById("legRight").classList.toggle("legRight");
      document.getElementById("legLeft").classList.toggle("legLeft");
      setTimeout(() => {
        document.getElementById("body").classList.toggle("body");
        document.getElementById("beak").classList.toggle("beak");
        document.getElementById("eyes").classList.toggle("eyes");
        document.getElementById("pupils").classList.toggle("pupils");
        document.getElementById("tail").classList.toggle("tail");
        document.getElementById("snood").classList.toggle("snood");
        document.getElementById("legRight").classList.toggle("legRight");
        document.getElementById("legLeft").classList.toggle("legLeft");
      }, 0)
    }
  </script>
</body>

</html>

我如何使土耳其跳上点击

1 个答案: