首頁 > 開發者 > JavaScript
使用 :hover 和 :focus 這樣的偽類，我們可以很方便的將元素從一個樣式切換到另一個樣式，而且切換是會有過渡效果。但有時我們想要使用 js 來驅動過渡（即在代碼中觸發過渡）也是可以實現的。
<!doctype html>
<html lang="en">
<head>
<title>hangge.com</title>
<style>
img {
position:absolute;
transition: opacity 5s;
-webkit-transition: opacity 5s;
}
.solid {
opacity: 1;
}
.transparent {
opacity: 0;
}
</style>
<script>
function toNight(){
var nightImage = document.getElementById("nightImage");
nightImage.className = "solid";
}
function toDay(){
var nightImage = document.getElementById("nightImage");
nightImage.className = "transparent";
}
</script>
</head>
<body>
<button onclick="toNight()">看夜景</button>
<button onclick="toDay()">看日景</button>
<div>
<img src="day.png" alt="日景"/>
<img src="night.png" alt="夜景" id="nightImage" class="transparent"/>
</div>
</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
