2020年1月3日 21:56:58go评论64阅读模式

英文:

Why my moving button in the div can't react?

问题

I made a button in a moving div and put an image for background. I also put an animation for div to make it move. However, the button didn't react. I make another button at the button(which for testing and it don't move), it react. Can anyone please help me to solve this problem?

Here are the codes:

Html

<h1>Animated Aquarium</h1>
<div id="Aquarium">
  <div id="box1">
    <button type="button" id="button1" onclick="jelly fish()">
      <img src="/img/7959f86c-dccb-410e-b928-73a282b866f1/jellyfish.png" id="jellyfish">
    </button>
  </div>
  <button type="button" id="button1" onclick="jellyfish()">test</button>
</div>

Style

<style>
  body {
    background: linear-gradient(to bottom right, #2F80ED, #56CCF2);
    height: 100vh;
  }
  #Aquarium {
    width: 700px;
    height: 500px;
    border: 10px solid #000;
    margin: 0 auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url("https://ak4.picdn.net/shutterstock/videos/9874064/thumb/1.jpg");
  }
  #box1{
    animation: jellyfishswim 24s infinite;
    position: absolute;
  }
  #button1{
    background-color: inherit;
    border: 0px;
  }
  #jellyfish{
    width: 100px;
    height: 100px;
  }

  @keyframes jellyfishswim {
    /* Keyframes animation code */
  }

  @keyframes giantjellyfishswim {
    /* Keyframes animation code */
  }
</style>

Script

<script>
  function jellyfish() {
    document.getElementById("jellyfish").style.width = "300px";
    document.getElementById("box1").style.animation = "giantjellyfishswim 12s infinite";
    alert("You distory the aquarium");
  }
</script>

请让我知道如果你需要任何进一步的帮助。

英文:

Here are the codes:

Html

&lt;h1&gt;Animated Aquarium&lt;/h1&gt;
&lt;div id=&quot;Aquarium&quot;&gt;
  &lt;div id=&quot;box1&quot;&gt;
    &lt;button type=&quot;button&quot; id=&quot;button1&quot; onclick=&quot;jelly fish()&quot;&gt;  
      &lt;img src=&quot;/img/7959f86c-dccb-410e-b928-73a282b866f1/jellyfish.png&quot;id=&quot;jellyfish&quot;&gt;
    &lt;/button&gt; 
  &lt;/div&gt;
  &lt;button type=&quot;button&quot; id=&quot;button1&quot; onclick=&quot;jellyfish()&quot;&gt;test&lt;/button&gt;
&lt;/div&gt;

Style
<style>

body {
  background: linear-gradient(to bottom right, #2F80ED, #56CCF2);
  height: 100vh;
}
#Aquarium {
  width: 700px;
  height: 500px;
  border: 10px solid #000;
  margin: 0 auto;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(&quot;https://ak4.picdn.net/shutterstock/videos/9874064/thumb/1.jpg&quot;);    
}
#box1{
  animation: jellyfishswim 24s infinite;  
  position: absolute;
}
#button1{    
  background-color: inherit;
  border:0px;
}
#jellyfish{
  width: 100px;
  height: 100px;
}

@keyframes jellyfishswim {
  0% {
    margin-left: 0px;
    transform: scaleX(-1);
  }
  10% {
	margin-left: 140px;
    margin-bottom: 100px;
  	transform: scaleX(-1);
  }
  20% {
	margin-left: 280px;
    margin-bottom:200px;
  	transform: scaleX(-1);
  }
  30% {
	margin-left: 420px;
    margin-bottom: 300px;
  	transform: scaleX(-1);
  }
  40% {
	margin-left: 560px;
    margin-top: 400px;
  	transform: scaleX(-1);
  }
  50% {
	margin-left: 600px;
    margin-top: 420px;
  	transform: scaleX(1);}
  60% {
	margin-left: 500px;
    margin-bottom: 340px;
  	transform: scaleX(1);
  }
  70% {
	margin-left: 420px;
    margin-bottom: 300px;
  	transform: scaleX(1);
  }
  80% {
	margin-left: 280px;
    margin-bottom: 200px;
  	transform: scaleX(1);
  }
  90% {
	margin-left: 120px;
    margin-bottom: 150px;
  	transform: scaleX(1);
  }
}

@keyframes giantjellyfishswim {
  0% {
	margin-left: 0px;
  	transform: scaleX(-1);
  }
  10% {
	margin-left: 70px;
    margin-bottom: 50px;
  	transform: scaleX(-1);
  }
  20% {
	margin-left: 140px;
    margin-bottom:100px;
  	transform: scaleX(-1);
  }
  30% {
	margin-left: 210px;
    margin-bottom: 150px;
  	transform: scaleX(-1);
  }
  40% {
	margin-left: 280px;
    margin-top: 200px;
  	transform: scaleX(-1);
  }
  50% {
	margin-left: 300px;
    margin-top: 210px;
  	transform: scaleX(1);
  }
  60% {
	margin-left: 250px;
    margin-bottom: 170px;
  	transform: scaleX(1);
  }
  70% {
	margin-left: 210px;
    margin-bottom: 150px;
  	transform: scaleX(1);
  }
  80% {
	margin-left: 140px;
    margin-bottom: 100px;
  	transform: scaleX(1);
  }
  90% {
	margin-left: 70px;
    margin-bottom: 50px;
  	transform: scaleX(1);
  }
}

Script

function jellyfish() {
  document.getElementById(&quot;jellyfish&quot;).style.width = &quot;300px&quot;;
  document.getElementById(&quot;box1&quot;).style.animation = &quot;giantjellyfishswim 12s infinite&quot;;
  alert(&quot;You distory the aquarium&quot;);
}

答案1

得分: 4

将以下内容从英文翻译为中文：

Change

    &lt;button type=&quot;button&quot; id=&quot;button1&quot; onclick=&quot;jelly fish()&quot;&gt;  

to 

    &lt;button type=&quot;button&quot; id=&quot;button1&quot; onclick=&quot;jellyfish()&quot;&gt;

翻译为：

将

    &lt;button type=&quot;button&quot; id=&quot;button1&quot; onclick=&quot;jelly fish()&quot;&gt;  

改为

    &lt;button type=&quot;button&quot; id=&quot;button1&quot; onclick=&quot;jellyfish()&quot;&gt;

英文:

Change

&lt;button type=&quot;button&quot; id=&quot;button1&quot; onclick=&quot;jelly fish()&quot;&gt;

&lt;button type=&quot;button&quot; id=&quot;button1&quot; onclick=&quot;jellyfish()&quot;&gt;

function jellyfish() {
  document.getElementById(&quot;jellyfish&quot;).style.width = &quot;300px&quot;;
  document.getElementById(&quot;box1&quot;).style.animation = &quot;giantjellyfishswim 12s infinite&quot;;
  alert(&quot;You distory the aquarium&quot;);
}

body {
  background: linear-gradient(to bottom right, #2F80ED, #56CCF2);
  height: 100vh;
}

#Aquarium {
  width: 700px;
  height: 500px;
  border: 10px solid #000;
  margin: 0 auto;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(&quot;https://ak4.picdn.net/shutterstock/videos/9874064/thumb/1.jpg&quot;);
}

#box1 {
  animation: jellyfishswim 24s infinite;
  position: absolute;
}

#button1 {
  background-color: inherit;
  border: 0px;
}

#jellyfish {
  width: 100px;
  height: 100px;
}



@keyframes jellyfishswim {
  0% {
    margin-left: 0px;
    transform: scaleX(-1);
  }

  10% {
    margin-left: 140px;
    margin-bottom: 100px;
    transform: scaleX(-1);
  }

  20% {
    margin-left: 280px;
    margin-bottom: 200px;
    transform: scaleX(-1);
  }

  30% {
    margin-left: 420px;
    margin-bottom: 300px;
    transform: scaleX(-1);
  }

  40% {
    margin-left: 560px;
    margin-top: 400px;
    transform: scaleX(-1);
  }

  50% {
    margin-left: 600px;
    margin-top: 420px;
    transform: scaleX(1);
  }

  60% {
    margin-left: 500px;
    margin-bottom: 340px;
    transform: scaleX(1);
  }

  70% {
    margin-left: 420px;
    margin-bottom: 300px;
    transform: scaleX(1);
  }

  80% {
    margin-left: 280px;
    margin-bottom: 200px;
    transform: scaleX(1);
  }

  90% {
    margin-left: 120px;
    margin-bottom: 150px;
    transform: scaleX(1);
  }
}


@keyframes giantjellyfishswim {
  0% {
    margin-left: 0px;
    transform: scaleX(-1);
  }

  10% {
    margin-left: 70px;
    margin-bottom: 50px;
    transform: scaleX(-1);
  }

  20% {
    margin-left: 140px;
    margin-bottom: 100px;
    transform: scaleX(-1);
  }

  30% {
    margin-left: 210px;
    margin-bottom: 150px;
    transform: scaleX(-1);
  }

  40% {
    margin-left: 280px;
    margin-top: 200px;
    transform: scaleX(-1);
  }

  50% {
    margin-left: 300px;
    margin-top: 210px;
    transform: scaleX(1);
  }

  60% {
    margin-left: 250px;
    margin-bottom: 170px;
    transform: scaleX(1);
  }

  70% {
    margin-left: 210px;
    margin-bottom: 150px;
    transform: scaleX(1);
  }

  80% {
    margin-left: 140px;
    margin-bottom: 100px;
    transform: scaleX(1);
  }

  90% {
    margin-left: 70px;
    margin-bottom: 50px;
    transform: scaleX(1);
  }
}

&lt;div id=&quot;aquarium&quot;&gt;
  &lt;div id=&quot;box1&quot;&gt;
    &lt;button type=&quot;button&quot; id=&quot;button1&quot; onclick=&quot;jellyfish()&quot;&gt;  
      &lt;img src=&quot;/img/7959f86c-dccb-410e-b928-73a282b866f1/jellyfish.png&quot; id=&quot;jellyfish&quot;&gt;
    &lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

为什么我的位于 div 内的移动按钮没有反应？

问题

答案1

如何将Go的HTML模板嵌入代码中？

如何更新嵌套在对象中的对象数组的元素？

如何解析已使用反斜杠字符串化的对象数组

我的API请求会循环，直到服务器发送错误。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论