JavaScript はピクチャークローズを実装します

Web デザインにおいて、写真は最も一般的な要素の 1 つです。ユーザーがWebページを閲覧する際に画像を閉じなければならない場面に遭遇することがありますが、その際にJavaScriptを使用して画像を閉じる機能を実装することができます。この記事ではJavaScriptを使用して画像を閉じる機能を実装する方法を紹介します。

1. 要件分析

ページに画像を挿入した後、ユーザーがページの閲覧を継続できるように画像を閉じる方法が必要です。要件を分析すると、この機能を実装するには次の要件が必要であることがわかります:

1. 画像の外側の領域をクリックするか、閉じるボタンをクリックすると画像を閉じることができます。関数の調整と変更を容易にするために、コードは理解しやすく保守しやすいものである必要があります。
2. コードの実行速度は速く、ユーザーの操作エクスペリエンスに影響を与えないようにする必要があります。
3. 2. 実装アイデア

上記の需要分析に基づいて、次の実装アイデアを設計できます:

表示される各画像について、 div を使用してそれをラップし、半透明の黒い背景を div に追加します。

1. 画像を div に配置し、中央に表示します。
2. div にクリック イベントを追加します。ユーザーが div をクリックし、画像以外の領域または閉じるボタンをクリックすると、div は非表示になります。
3. 3. 実装手順

HTML ファイルに div 要素を追加し、表示する画像を div 内に配置します。

1. <div id="imgBox">
       <img src="yourImage.jpg">
   </div>

CSS ファイル内の div 要素のスタイルを設定します。

2. #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%;
   }

JavaScript ファイルにコードを記述して、div 要素のクリック イベントを設定します。

3. var imgBox = document.getElementById('imgBox');
   imgBox.addEventListener('click',function(e){
       if(e.target === imgBox || e.target.nodeName === 'SPAN'){
           imgBox.style.display = 'none';
       }
   });

上記のコードでは、div 要素にクリック イベントを追加しました。ユーザーが div 要素をクリックすると、コードはクリック イベントのターゲット要素が div 要素自体であるかどうかを判断します。または、特定の閉じるボタン (この例では、閉じるボタンとして scan 要素を使用しました) の場合、div 要素は非表示になります。

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 サイトの他の関連記事を参照してください。