JavaScript_01 ― 2023年04月15日 19:03
- ChatGPT問いに答えて曰く-
(A)
<!DOCTYPE html>
<html>
<head>
<title>Fade In / Fade Out Image</title>
<style>
#imageContainer {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
cursor: pointer;
}
#fadeImage {
opacity: 0;
}
</style>
</head>
<body>
<div id="imageContainer">
<a href="https://example.com" target="_blank">
<img id="fadeImage" src="example.jpg">
</a>
</div>
<script>
var image = document.getElementById('fadeImage');
var fadeInDuration = 3000; // フェードインの時間 (ミリ秒)
var fadeOutDuration = 4000; // フェードアウトの時間 (ミリ秒)
var fadeTimer; // フェードのタイマー
// ページの読み込みが完了した後に実行
window.onload = function() {
// 画像をフェードイン
fadeIn();
};
// フェードインの関数
function fadeIn() {
clearInterval(fadeTimer); // タイマーをクリア
var opacity = 0;
image.style.opacity = opacity;
var interval = 50; // フェードインの間隔 (ミリ秒)
var step = 1 / (fadeInDuration / interval);
fadeTimer = setInterval(function() {
opacity += step;
image.style.opacity = opacity;
if (opacity >= 1) {
clearInterval(fadeTimer);
// 指定された時間後にフェードアウトを開始
setTimeout(function() {
fadeOut();
}, fadeOutDuration);
}
}, interval);
}
// フェードアウトの関数
function fadeOut() {
clearInterval(fadeTimer); // タイマーをクリア
var opacity = 1;
image.style.opacity = opacity;
var interval = 50; // フェードアウトの間隔 (ミリ秒)
var step = 1 / (fadeOutDuration / interval);
fadeTimer = setInterval(function() {
opacity -= step;
image.style.opacity = opacity;
if (opacity <= 0) {
clearInterval(fadeTimer);
}
}, interval);
}
// 画像をクリックした際にリンク先に移動
image.addEventListener('click', function() {
window.open('https://example.com', '_blank');
});
</script>
</body>
</html>
(A)
<!DOCTYPE html>
<html>
<head>
<title>Fade In / Fade Out Image</title>
<style>
#imageContainer {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
cursor: pointer;
}
#fadeImage {
opacity: 0;
}
</style>
</head>
<body>
<div id="imageContainer">
<a href="https://example.com" target="_blank">
<img id="fadeImage" src="example.jpg">
</a>
</div>
<script>
var image = document.getElementById('fadeImage');
var fadeInDuration = 3000; // フェードインの時間 (ミリ秒)
var fadeOutDuration = 4000; // フェードアウトの時間 (ミリ秒)
var fadeTimer; // フェードのタイマー
// ページの読み込みが完了した後に実行
window.onload = function() {
// 画像をフェードイン
fadeIn();
};
// フェードインの関数
function fadeIn() {
clearInterval(fadeTimer); // タイマーをクリア
var opacity = 0;
image.style.opacity = opacity;
var interval = 50; // フェードインの間隔 (ミリ秒)
var step = 1 / (fadeInDuration / interval);
fadeTimer = setInterval(function() {
opacity += step;
image.style.opacity = opacity;
if (opacity >= 1) {
clearInterval(fadeTimer);
// 指定された時間後にフェードアウトを開始
setTimeout(function() {
fadeOut();
}, fadeOutDuration);
}
}, interval);
}
// フェードアウトの関数
function fadeOut() {
clearInterval(fadeTimer); // タイマーをクリア
var opacity = 1;
image.style.opacity = opacity;
var interval = 50; // フェードアウトの間隔 (ミリ秒)
var step = 1 / (fadeOutDuration / interval);
fadeTimer = setInterval(function() {
opacity -= step;
image.style.opacity = opacity;
if (opacity <= 0) {
clearInterval(fadeTimer);
}
}, interval);
}
// 画像をクリックした際にリンク先に移動
image.addEventListener('click', function() {
window.open('https://example.com', '_blank');
});
</script>
</body>
</html>
