ホームページ > 記事 > ウェブフロントエンド > JavaScript を使用して画像のライトボックス効果を実現するにはどうすればよいですか?
JavaScript を使用して画像のライトボックス効果を実現するにはどうすればよいですか?
- WBOYオリジナル
- 2023-10-18 11:15:20672ブラウズ
JavaScript を使用して画像のライトボックス効果を実現するにはどうすればよいですか?
ソーシャル メディアと Web デザインの発展に伴い、画像のライトボックス効果は、多くの Web サイトで一般的なインタラクティブな特殊効果の 1 つになりました。画像ライトボックスは、画像をクリックすると画面中央に拡大表示されるエフェクトです。ユーザーエクスペリエンスが向上するだけでなく、画像の詳細がより良く表示されます。この記事では、JavaScript を使用して単純な画像のライトボックス効果を実装する方法を学びます。
まず、画像を表示するための HTML ページが必要です。以下は基本的な HTML 構造です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片灯箱</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<img src="image1.jpg" alt="Image 1" class="lightbox">
<img src="image2.jpg" alt="Image 2" class="lightbox">
<img src="image3.jpg" alt="Image 3" class="lightbox">
</div>
<div id="lightbox" class="hidden">
<img src="" alt="Lightbox Image" id="lightbox-image">
<span id="close-button">X</span>
</div>
<script src="script.js"></script>
</body>
</html>上記のコードでは、3 つの画像を含むコンテナを作成し、各画像に「ライトボックス」のクラスを追加しました。また、拡大画像を表示するための隠し div を「lightbox」という ID で作成します。この div では、空の画像と閉じるボタンを追加しました。
次に、画像のライトボックスの効果を実現するために、いくつかの CSS スタイルを作成する必要があります。 style.css という名前のファイルを作成し、次のスタイルを追加します。
.container {
display: flex;
}
.lightbox {
cursor: pointer;
width: 200px;
height: 200px;
}
#lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
z-index: 9999;
}
#lightbox img {
width: 80%;
max-height: 80%;
margin-bottom: 20px;
}
#close-button {
color: #fff;
font-size: 30px;
cursor: pointer;
}上記の CSS スタイルでは、ページ上にグリッドの形式で表示できるようにコンテナーと画像のスタイルを設定します。 。また、画像を拡大した際のレイアウトや背景色を調整するために使用する「ライトボックス」と呼ばれるスタイルも定義します。最後に、拡大画像のスタイルと閉じるボタンのスタイルを設定します。
これで、JavaScript コードの作成を開始できます。 HTML ファイルと同じディレクトリに script.js という名前のファイルを作成し、次のコードを追加します。
// 获取所有的图片元素
var lightboxImages = document.getElementsByClassName("lightbox");
// 获取放大图片和关闭按钮元素
var lightbox = document.getElementById("lightbox");
var lightboxImage = document.getElementById("lightbox-image");
var closeButton = document.getElementById("close-button");
// 绑定点击事件，显示放大图片
for (var i = 0; i < lightboxImages.length; i++) {
lightboxImages[i].addEventListener("click", function() {
var imageSource = this.getAttribute("src");
lightboxImage.setAttribute("src", imageSource);
lightbox.classList.remove("hidden");
});
}
// 绑定点击事件，隐藏放大图片
closeButton.addEventListener("click", function() {
lightbox.classList.add("hidden");
});上記の JavaScript コードでは、まず getElementsByClassName メソッドを通じてすべてのファイルを取得します。 「lightbox」クラスの画像要素。次に、ズーム画像と閉じるボタンの要素を取得します。次に、ループを使用してクリック イベントを各画像にバインドします。ユーザーが画像をクリックすると、画像のソース アドレスが拡大画像のアドレスに設定され、拡大画像の非表示スタイルが削除されます。最後に、閉じるボタンのクリック イベントをバインドし、ユーザーが閉じるボタンをクリックしたときに画像を拡大する非表示スタイルを追加します。
これで、ブラウザで HTML ファイルを開き、画像をクリックすると、画像が拡大されてページの中央に表示される効果を確認できます。閉じるボタンをクリックすると拡大画像が非表示になります。
上記は、JavaScript を使用して画像のライトボックス効果を実現するサンプル コードです。ニーズに応じて変更および拡張し、より複雑で多様な画像ライトボックス効果を作成できます。あなたがこれを達成できることを祈っています!
以上がJavaScript を使用して画像のライトボックス効果を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。