Javascriptクリックして、2秒かけて450度回転してから画像が差し替わり、1080度回転して止まる書き方
<div>
<img id="myImage" src="初期の画像.jpg" alt="初期の画像">
</div>
<script>
// 画像要素を取得します
var image = document.getElementById("myImage");
// クリックイベントの処理を定義します
function handleClick() {
// 画像を回転させるアニメーションを設定します
image.style.transition = "transform 2s";
image.style.transform = "rotate(450deg)";
// 2秒後に画像を差し替えてさらに回転させるアニメーションを設定します
setTimeout(function() {
image.src = "新しい画像.jpg";
image.alt = "新しい画像";
image.style.transform = "rotate(1080deg)";
}, 2000);
}
// クリックイベントのリスナーを追加します
image.addEventListener("click", handleClick);
</script>
関連
ディスカッション
コメント一覧
まだ、コメントがありません