我想做一個收到圖片後會從網頁右下角像訊息一樣跳出小圖,
然後在不影響UI操作下自己跳出後慢慢淡出。
我目前想法是跟menu那種做法相似,用hover過去他會移出來一點給你看到又點選到。 例子: https://codepen.io/Shven/pen/JjJMwo
但是比較不清楚如何透過javascript上傳圖片成功後,來觸發像我hover的動作去令訊息彈出。
function showMessage() {
// 更改CSS樣式,顯示#message
document.getElementById("message").style.display = "block";
// 添加淡出效果
$("#message").fadeOut(3000);
}
// 監聽圖片上傳成功事件,觸發showMessage函數
document.getElementById("your-upload-input").addEventListener("change", showMessage);
<div id="message">
<img src="path/to/your/image" alt="message image">
</div>
#message {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
border: 1px solid #ccc;
padding: 10px;
background-color: #fff;
}