<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> p { position: relative; } input {/*按鈕樣式*/ cursor: pointer; border: none; outline: none; background: #34BC9D; color: #fff; height: 40px; } img { position: absolute; transition: 1s; left: 0; top: 100%; opacity: 0; cursor: pointer; display: none; } </style></head><body> <p> <input id="root" type="button" onclick="show()" value="點擊顯示圖片"> <img id="img" src="http://www.qianduanzhan.com/zb_users/upload/2017/07/201707161500184837405094.png" alt=""> </p><script> var root = document.getElementById("root"); var img = document.getElementById("img"); function show(){ if(root.value === "點擊顯示圖片"){ root.value = "點擊隱藏圖片"; /*設定setTimeout，讓display先執行，opacity後執行*/ img.style.display = "block"; setTimeout(function () { img.style.opacity = 1; },.1); }else{ root.value = "點擊顯示圖片"; img.style.opacity = 0; /*隱藏需要先執行opacity，再執行display，否則無效*/ setTimeout(function () { img.style.display = "none"; },900); } }</script></body></html>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
