순수 CSS를 사용하여 클릭하면 확대되는 이미지를 얻는 방법-프런트엔드 Q&A-php.cn

순수 CSS를 사용하여 클릭하면 확대되는 이미지를 얻는 방법

藏色散人

풀어 주다： 2023-01-28 14:40:34

원래의

2381명이 탐색했습니다.

순수한 CSS로 이미지를 확대하는 방법: 1. HTML 샘플 파일을 생성합니다. 2. "

"; 3. 클릭 효과를 얻으려면 "function showBgImg(e) {...}" 메소드를 사용하십시오. 이미지를 확대해 보세요.

순수 CSS를 사용하여 클릭하면 확대되는 이미지를 얻는 방법

이 튜토리얼의 운영 환경: Windows 10 시스템, HTML5&&CSS3 버전, DELL G3 컴퓨터

순수 CSS를 사용하여 이미지를 클릭하여 확대하는 방법은 무엇입니까?

Css 실제 교육 사진은 클릭하면 커집니다

I.배경

일반적으로 웹사이트에서 썸네일을 클릭하면 팝업으로 표시됩니다. -up box. 확대된 사진

이 기능은 어떻게 구현되나요? 방금 CSS의 기본을 배웠으니 이제 실제로 할 수 있습니다

1. 아이디어

먼저 페이지 구조를 분할합니다.

거기 팝업창에 큰 그림을 표시하는 팝업창이며, 팝업창은 기본적으로 숨겨져 있습니다
메인 페이지에 많은 사진을 배치하고 클릭 이벤트를 추가할 수 있습니다
클릭 후 팝업이 나타납니다. -업 창에 큰 그림이 표시되고 표시됩니다
Large 아래 그림을 클릭한 후 팝업 창을 닫습니다

II. 구현

위 설명에 따라 먼저 기본 버전을 구현하고 먼저 HTML을 작성합니다

<body>

<!-- 先来实现弹窗 -->
<div class=&#39;modal&#39; id=&#39;modal&#39;>
    <img  id=&#39;bgImg&#39; / alt="순수 CSS를 사용하여 클릭하면 확대되는 이미지를 얻는 방법" >
</div>


<!-- 下面则是主页内容，先只给几个图片 -->

<div>
    <img class=&#39;thum-img&#39; 
    src=&#39;http://f.hiphotos.baidu.com/image/pic/item/80cb39dbb6fd5266cdb2ba16a718972bd4073612.jpg&#39; />
</div>

</body>

로그인 후 복사

그런 다음 해당 스타일을 추가하여 기본적으로 모달을 숨겨야 합니다. 다음과 같이 합니다(팝업 창을 더 잘 구별하기 위해 배경색과 테두리가 추가됩니다)

<style>
.modal {
    display: none;
    margin: auto;
    width: 80%;
    height: 80%;
    background-color: rgb(0, 0, 0, 0.89);
    z-index: 1;
    border: 1px solid rgb(255,255,255,1);
}

.modal>img {
    display: block;
    margin: auto;
    padding: 10%;
    max-width: 60%;
    max-height: 60%;
}

.thum-img {
    width: 200px;
    height: 200px;
    margin: auto;
    display: block;
    padding: 40px;
}

</style>

로그인 후 복사

다음 단계는 js의 도움으로 구현된 큰 이미지를 표시하는 로직을 클릭하는 것입니다.

<script>
    var modal = document.getElementById(&#39;modal&#39;);
    var bgImg = document.getElementById(&#39;bgImg&#39;);
    var thumImg = document.getElementById(&#39;thumImg&#39;);
    thumImg.onclick = function() {
        modal.style.display = &#39;block&#39;;
        bgImg.src = this.src;
    }

    bgImg.onclick = function() {
        modal.style.display = &#39;none&#39;;
    }
</script>

로그인 후 복사

위 구현을 추가하고 html로 조립한 후 직접 테스트하고 확인하면 시연 효과는 다음과 같습니다.

순수 CSS를 사용하여 클릭하면 확대되는 이미지를 얻는 방법

위에서 기대한 결과를 얻었지만 만족스럽지 못한 점이 몇 가지 있습니다

기대했던 팝업 효과가 아니라서 원본 사진이 압축되었습니다
아마도 팝업창에 확대된 애니메이션 효과가 있으면 더 좋습니다. (이전에 배운 애니메이션을 그대로 활용하면 됩니다.)
사진에 사진이 많을 때 클릭하면 어떻게 확대되나요?

III. 우선, 기존 레이아웃에 영향을 주지 않고 실제 팝업 창이 되기를 원합니다. 이는 일반적으로 위치를 설정하여 수행됩니다. 예를 들어 모달 외부에 다른 레이어를 추가하여

<div style=&#39;position:fixed&#39;>
    <div class=&#39;modal&#39; id=&#39;modal&#39;>
        <img  id=&#39;bgImg&#39; / alt="순수 CSS를 사용하여 클릭하면 확대되는 이미지를 얻는 방법" >
    </div>
</div>

로그인 후 복사

이 될 수 있습니다. 팝업창 스타일이 너무 못생겼습니다. 이전에 배운 테두리 그림자를 사용하여 아름다운 팝업 효과를 얻을 수 있습니다.

배경을 모든 그림으로 채우도록 변경하세요.

배경색을 제거하고, 그림자를 추가하고 흰색 테두리를 추가합니다

.modal {
    display: none;
    margin: auto;
    padding-top: 5%;
    width: 50%;
    height: 80%;
    z-index: 1;
    background-color: white;
}

.modal img {
    display: block;
    padding: 10px;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 2px 6px rgb(0, 0, 0, 0.2), 0 10px 20px rgb(0, 0, 0, 0.2);
    border-radius: 12px;
    border: 1px solid white;
}

로그인 후 복사

다음으로 애니메이션과 확대 효과를 추가해 보세요

@keyframes zoom {
    from {transform: scale(0.1)}
    to {transform: scale(1)}
}

.modal img {
    animation-name: zoom;
    animation-duration: 0.6s;
}

로그인 후 복사

다음으로 데모 효과를 살펴보세요

순수 CSS를 사용하여 클릭하면 확대되는 이미지를 얻는 방법 다음 단계는 이를 범용 솔루션으로 바꾸는 것입니다. 이는 주로 이미지 클릭 이벤트를 수정하는 것입니다. 위의 하드 코딩된 부분을 약간 변경하면 됩니다.

순수 CSS를 사용하여 클릭하면 확대되는 이미지를 얻는 방법 IV. 모든 소스 코드

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>小灰灰css学习笔记</title> 
<style>
#modal {
	display: none;
}
.modal {
    margin: auto;
    padding-top: 5%;
    width: 50%;
    height: 80%;
    z-index: 1;
}

.modal img {
    animation-name: zoom;
	animation-duration: 0.6s;
    display: block;
    padding: 10px;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 2px 6px rgb(0, 0, 0, 0.2), 0 10px 20px rgb(0, 0, 0, 0.2);
    border-radius: 12px;
    border: 1px solid white;
}

@keyframes zoom {
    from {transform: scale(0.1)}
    to {transform: scale(1)}
}

.thum-img {
    float: left;
    width: 200px;
    height: 200px;
    margin: auto;
    display: block;
    padding: 40px;
}
</style>
	</head>
<body>
<!-- 先来实现弹窗 -->
<div style=&#39;position:fixed;width:100%;height:100%;background-color:rgb(0,0,0,0.65)&#39; id=&#39;modal&#39;>
<div class=&#39;modal&#39; id=&#39;modalw&#39;>
    <img  id=&#39;bgImg&#39; / alt="순수 CSS를 사용하여 클릭하면 확대되는 이미지를 얻는 방법" >
</div>
</div>


<!-- 下面则是主页内容，先只给几个图片 -->

<div>
    <img onclick=&#39;showBgImg(this)&#39; class=&#39;thum-img&#39; 
    src=&#39;http://f.hiphotos.baidu.com/image/pic/item/80cb39dbb6fd5266cdb2ba16a718972bd4073612.jpg&#39; />
 	<img  class=&#39;thum-img&#39; src=&#39;http://a.hiphotos.baidu.com/image/pic/item/e61190ef76c6a7ef5e886d03f1faaf51f3de666d.jpg&#39; onclick=&#39;showBgImg(this)&#39;/ alt="순수 CSS를 사용하여 클릭하면 확대되는 이미지를 얻는 방법" > 
    <img  class=&#39;thum-img&#39; src=&#39;http://g.hiphotos.baidu.com/image/pic/item/730e0cf3d7ca7bcb747b4a5cb2096b63f624a845.jpg&#39; onclick=&#39;showBgImg(this)&#39;/ alt="순수 CSS를 사용하여 클릭하면 확대되는 이미지를 얻는 방법" >
    <img  class=&#39;thum-img&#39; src=&#39;http://c.hiphotos.baidu.com/image/pic/item/b21c8701a18b87d6657856e70c0828381f30fd14.jpg&#39; onclick=&#39;showBgImg(this)&#39;/ alt="순수 CSS를 사용하여 클릭하면 확대되는 이미지를 얻는 방법" >
    <img  class=&#39;thum-img&#39; src=&#39;https://raw.githubusercontent.com/liuyueyi/Source/master/img/info/blogInfoV2.png&#39; onclick=&#39;showBgImg(this)&#39;/ alt="순수 CSS를 사용하여 클릭하면 확대되는 이미지를 얻는 방법" >
</div>

<script>
    var modal = document.getElementById(&#39;modal&#39;);
    var bgImg = document.getElementById(&#39;bgImg&#39;);


    function showBgImg(e) {
		modal.style.display = &#39;block&#39;;
		bgImg.src = e.src;
	}

	bgImg.onclick = function() {
		modal.style.display = &#39;none&#39;;
	}
</script>
</body>
</html>

로그인 후 복사

추천 연구: "css 비디오 튜토리얼

위 내용은 순수 CSS를 사용하여 클릭하면 확대되는 이미지를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!