元素放置的視覺效果我正在嘗試制作一個“撫摸狗游戲”，我想在他的頭上放一個 div，當你單擊該 DIV 時，它會觸發一個 JS 函數將照片更改為 .gif，然后再回到這里，這是我的代碼JS：function pet_head(){ var image = getElementById("image"); image.src="DogPet.gif"; setTimeout(function(){ image.src="dog.jpeg"; }, 1000//length of gif );};HTML：<div class="main"> <img id="image" src="dog.jpeg"> <div class="click></div></div>CSS：img{height:100%;width100%;position:absolute;}
2 回答
一只斗牛犬
TA貢獻1784條經驗 獲得超2個贊
如果您在圖像中使用絕對值，它將始終位于其他所有內容之上。
看看下面，看看這是否是您想要的。
function pet_head(event) {
/*var image = getElementById("image");
image.src = "DogPet.gif";
setTimeout(function() {
image.src = "dog.jpeg";
}, 1000 //length of gif
);*/
alert('changed');
};
document.getElementById('click').addEventListener('click', pet_head);
img {
height: 100%;
width: 100%;
}
div {
/* This will center the image horizontally */
display: flex;
justify-content: center;
position: absolute;
}
div#click {
color: green;
border: 2px solid red;
top: 14%;
height: 45%;
width: 300px;
position: absolute;
}
<div class="main">
<div id="click"></div>
<img id="image" src="https://i.insider.com/5df126b679d7570ad2044f3e?width=1100&format=jpeg&auto=webp" />
</div>
拉莫斯之舞
TA貢獻1820條經驗 獲得超10個贊
這是您的代碼的工作版本。另請注意（除了刪除代碼拼寫錯誤之外）我添加object-fit: cover到您的img，以便它在視口大小變化時保留縱橫比。
function pet_head() {
// var image = document.getElementById("image");
alert("petting the dog");
/* image.src = "DogPet.gif";
setTimeout(function() {
image.src = "dog.jpeg";
}, 1000 //length of gif
); */
};
document.querySelector(".click").addEventListener("click", pet_head);
img {
height: 100%;
width: 100%;
position: absolute;
object-fit: cover;
}
.click {
position: absolute;
left: 49%;
top: 22px;
height: 13vh;
width: 17vw;
cursor: pointer;
}
/* Presentational styles */
.click {
background: yellow;
opacity: .1;
}
html, body {
margin: 0;
}
*, *::before, &::after {
box-sizing: border-box;
}
<div class="main">
<img id="image" src="https://i.stack.imgur.com/FthXz.jpg">
<div class="click"></div>
</div>
- 2 回答
- 0 關注
- 152 瀏覽
添加回答
舉報
0/150
提交
取消