Web デザインにおいて、写真は最も一般的な要素の 1 つです。ユーザーがWebページを閲覧する際に画像を閉じなければならない場面に遭遇することがありますが、その際にJavaScriptを使用して画像を閉じる機能を実装することができます。この記事ではJavaScriptを使用して画像を閉じる機能を実装する方法を紹介します。
1. 要件分析
ページに画像を挿入した後、ユーザーがページの閲覧を継続できるように画像を閉じる方法が必要です。要件を分析すると、この機能を実装するには次の要件が必要であることがわかります:
上記の需要分析に基づいて、次の実装アイデアを設計できます:
表示される各画像について、 div を使用してそれをラップし、半透明の黒い背景を div に追加します。<div id="imgBox"> <img src="yourImage.jpg"> </div>
#imgBox{ display: none; position: fixed; top: 0; left: 0; height: 100%; width: 100%; background-color: rgba(0,0,0,0.7); z-index: 9999; } #imgBox img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); max-width: 90%; max-height: 90%; }
var imgBox = document.getElementById('imgBox'); imgBox.addEventListener('click',function(e){ if(e.target === imgBox || e.target.nodeName === 'SPAN'){ imgBox.style.display = 'none'; } });
4. 完全なコード
コア コードは次のとおりです:
<div id="imgBox"> <img src="yourImage.jpg"> <span>关闭</span> </div>
#imgBox{ display: none; position: fixed; top: 0; left: 0; height: 100%; width: 100%; background-color: rgba(0,0,0,0.7); z-index: 9999; } #imgBox img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); max-width: 90%; max-height: 90%; } #imgBox span{ position: absolute; top: 10px; right: 10px; color: #fff; cursor: pointer; } #imgBox span:hover{ text-decoration: underline; }
var imgBox = document.getElementById('imgBox'); imgBox.addEventListener('click',function(e){ if(e.target === imgBox || e.target.nodeName === 'SPAN'){ imgBox.style.display = 'none'; } });
5. まとめ
上記の手順により、JavaScript を使用して正常に終了しました。画像関数。ユーザーが画像の外側の領域または閉じるボタンをクリックすると、画像はページから消えます。関数のコード構造は明確で、理解しやすく、保守しやすく、非常に高速に実行されます。この機能を使用すると、ユーザーの操作エクスペリエンスが向上し、より便利に Web を閲覧できるようになります。
以上がJavaScript はピクチャークローズを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。