溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
display實現淡入淡出過渡效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
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>
<div>
<input id="root" type="button" onclick="show()" value="點擊顯示圖片">
<img id="img" src="http://www.qianduanzhan.com/zb_users/upload/2017/07/201707161500184837405094.png" alt="">
</div>
<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>免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
