JavaScript는 그림 닫기를 구현합니다.

웹 디자인에서 사진은 가장 일반적인 요소 중 하나입니다. 사용자가 웹 페이지를 탐색할 때 때때로 이미지를 닫아야 하는 상황에 직면할 수 있습니다. 이때 JavaScript를 사용하여 이미지를 닫는 기능을 구현할 수 있습니다. 이 기사에서는 JavaScript를 사용하여 이미지 닫기 기능을 구현하는 방법을 소개합니다.

1. 요구사항 분석

페이지에 사진을 삽입한 후 사용자가 페이지를 계속 탐색할 수 있도록 사진을 닫는 방법이 필요합니다. 요구 사항을 분석하여 이 기능을 구현하려면 다음 요구 사항이 필요하다는 것을 확인할 수 있습니다.

1. 사진 외부 영역을 클릭하거나 닫기 버튼을 클릭하면 사진이 닫힐 수 있습니다.
2. 이 기능을 쉽게 조정하고 수정하려면, 코드는 이해하고 유지 관리하기 쉬워야 합니다.
3. 코드 실행 속도는 사용자의 작업 경험에 영향을 주지 않고 빨라야 합니다.

2. 구현 아이디어

위의 수요 분석을 바탕으로 다음과 같은 구현 아이디어를 설계할 수 있습니다.

1. 표시할 각 이미지에 대해 div를 사용하여 래핑하고 div에 반투명을 추가합니다. 검정색 배경;
2. div에 이미지를 배치하고 중앙에 표시합니다.
3. 사용자가 div를 클릭할 때 이미지가 아닌 영역을 클릭하거나 닫기를 클릭하면; 버튼을 클릭하면 div가 숨겨집니다.

3. 구현 단계

1. HTML 파일에 div 요소를 추가하고 div에 표시할 이미지를 배치합니다.

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

2. CSS 파일에서 이 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%;
}

3. JavaScript 파일에 코드를 작성하여 div 요소에 대한 클릭 이벤트를 설정하세요.

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 요소 자체인지 아니면 닫기 버튼(에서)인지 결정합니다. 이 예에서는 닫기 버튼으로 범위 요소를 사용합니다. 그렇다면 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를 사용하여 이미지 닫기 기능을 구현했습니다. 사용자가 이미지 외부 영역이나 닫기 버튼을 클릭하면 해당 이미지가 페이지에서 사라집니다. 함수의 코드 구조는 명확하고 이해 및 유지 관리가 쉽고 매우 빠르게 실행됩니다. 이 기능을 사용하면 사용자의 작동 경험이 향상되고 사용자가 웹을 더욱 편리하게 검색할 수 있습니다.

위 내용은 JavaScript는 그림 닫기를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!