英文:
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>
请让我知道如果你需要任何进一步的帮助。
英文:
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 {
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("jellyfish").style.width = "300px";
document.getElementById("box1").style.animation = "giantjellyfishswim 12s infinite";
alert("You distory the aquarium");
}
答案1
得分: 4
将以下内容从英文翻译为中文：
Change
<button type="button" id="button1" onclick="jelly fish()">
to
<button type="button" id="button1" onclick="jellyfish()">
翻译为：
将
<button type="button" id="button1" onclick="jelly fish()">
改为
<button type="button" id="button1" onclick="jellyfish()">
英文:
Change
<button type="button" id="button1" onclick="jelly fish()">
to
<button type="button" id="button1" onclick="jellyfish()">
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function jellyfish() {
document.getElementById("jellyfish").style.width = "300px";
document.getElementById("box1").style.animation = "giantjellyfishswim 12s infinite";
alert("You distory the aquarium");
}
<!-- language: lang-css -->
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 {
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);
}
}
<!-- language: lang-html -->
<div id="aquarium">
<div id="box1">
<button type="button" id="button1" onclick="jellyfish()">
<img src="/img/7959f86c-dccb-410e-b928-73a282b866f1/jellyfish.png" id="jellyfish">
</button>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论