문이 이미지라면
261
작성한 질문수 1
안녕하세요. 강의 보면서 혼자 열심히 연구 중인데,
예쁘게 바꾸어 보는 중에 문에 이미지를 추가 했더니 실행이 되지 않습니다.
door-body 태그안에 넣었는데, 백그라운드는 괜찮은데 img태그를 쓸 경우에는 어떻게 해야할까요?
const doorImg = document.querySelector('.door-body img'); 이렇게 변수를 써서
if (targetElem.classList.contains('doorImg')) {
이렇게 해보아도 안되고 , 비슷한 사례가 있는지 구글에 검색을 해보면서 4시간을 고민해보았지만 초보로서 도무지 찾을 수가 없네요 ㅠ_ㅠ
답변 기다리겠습니다.
답변 2
4
<img>를 추가하셨으니 이제는 클릭 이벤트객체의 target이 <img>가 될 것이므로,
해당 부분 처리하는 곳을 수정해주시면 됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Interactive Web</title>
<link rel="stylesheet" href="css/reset.css">
<style>
img {
max-width: 100%;
}
.stage {
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
background: #333;
}
.door {
position: relative;
width: 100px;
height: 150px;
}
.door-back {
overflow: hidden;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: black;
}
.ilbuni {
position: absolute;
left: 0;
bottom: 0;
width: 100px;
height: 100px;
background-repeat: no-repeat;
background-position: 50% 100%;
background-size: contain;
transform: translate3d(100%, 0, 0);
transition: 0.5s 0.5s;
}
.door:nth-child(1) .ilbuni { background-image: url(images/ilbuni_0.png); }
.door:nth-child(2) .ilbuni { background-image: url(images/ilbuni_1.png); }
.door:nth-child(3) .ilbuni { background-image: url(images/ilbuni_2.png); }
.door-body {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: 0.5s;
transform-origin: 0%;
cursor: pointer;
}
.door:nth-child(1) .door-body { background: rgba(255, 0, 0, 0.7); }
.door:nth-child(2) .door-body { background: rgba(0, 255, 0, 0.7); }
.door:nth-child(3) .door-body { background: rgba(0, 0, 255, 0.7); }
.door-opened .door-body {
transform: perspective(800px) rotateY(-110deg);
}
.door-opened .ilbuni {
transform: translate3d(0, 0, 0);
}
</style>
</head>
<body>
<div class="stage">
<div class="door">
<div class="door-back">
<div class="ilbuni"></div>
</div>
<div class="door-body">
<img class="door-img" src="images/ilbuni-door_0.png" alt="">
</div>
</div>
<div class="door">
<div class="door-back">
<div class="ilbuni"></div>
</div>
<div class="door-body">
<img class="door-img" src="images/ilbuni-door_0.png" alt="">
</div>
</div>
<div class="door">
<div class="door-back">
<div class="ilbuni"></div>
</div>
<div class="door-body">
<img class="door-img" src="images/ilbuni-door_0.png" alt="">
</div>
</div>
</div>
<script>
(function() {
const stageElem = document.querySelector('.stage');
// 현재 활성화된 아이템을 저장
let currentItem;
// 활성화
function activate(elem) {
elem.classList.add('door-opened');
currentItem = elem;
}
// 비활성화
function inactivate(elem) {
elem.classList.remove('door-opened');
}
function doorHandler(e) {
const targetElem = e.target;
if (currentItem) {
inactivate(currentItem);
}
if (targetElem.classList.contains('door-img')) {
activate(targetElem.parentNode.parentNode);
}
}
stageElem.addEventListener('click', doorHandler);
activate( document.querySelector('.door:nth-child(2)') );
})();
</script>
</body>
</html>
문 이미지 태그에 door-img라는 클래스를 넣었고요,
스크립트에서는
if (targetElem.classList.contains('door-img')) {
activate(targetElem.parentNode.parentNode);
}
이런 식으로 그에 맞게 바꾸어 주었습니다.
https://youtu.be/-fFNuNsR8q4
이벤트 위임 보강 파트에 연결된 영상인데요,
이 영상에 나오는 방식으로 만들어보시면 더 견고하게(구조가 수정되어도 상관없는) 코드로 만드실 수도 있답니다.
왼쪽/오른쪽 동작시 딜레이 문제
0
93
1
변수 범위 관련 질문
0
106
1
perspective 문의
0
100
1
생성자 함수를 클래스 함수로 변경 하고 this 오류 관련
0
150
1
스크롤이 중간 위치에 있을 때 창의 크기를 변환하면 생기는 문제
0
127
1
animation이벤트 질문이요!
0
71
1
resize handler에서 질문이 있습니다.
0
110
1
카드 뒤집힐 때 F가 보인 이유
0
149
1
3d 뒤집기 추가효과
0
217
1
전진! 3D 스크롤 21 강의 질문
1
171
1
eventlistener 질문
0
148
1
zMove 를 1000으로 설정하는 이유에 대하여.
0
168
1
[정보-23강] ES6 class 문법으로 공부하시는 분들!! 화살표 함수로도 시도해보셔요!
1
191
1
동적으로 html 생성 후 이벤트 위임 질문 있습니다.
0
265
1
rotateY()에서 deg에 따른 차이
0
197
1
코드 작성 순서
0
275
1
이미지가 없는데 첨부파일을 다운 받는 방법이 있나요??
1
394
1
'이벤트 위임 보강 영상'에 있는 예제 html이 안 보입니다
0
265
2
섹션5 자바스크립트 이벤트 다루기 질문
1
243
1
[#전진! 3D 스크롤 11] mousePos 공식 질문 있습니다!
0
423
2
css 는 직접 작성을 해야하는걸까용?
0
326
1
translateZ 에 px 이 아닌 vw 로 값을 주신 이유가 있을가요?
0
359
2
house 부분에도 width , height 부분을 꽉 차게 주신 부분이 제가 이해한게 맞는지 궁금합니다.
0
304
2
left:-400vw 가 아닌 translateZ(100vw); 을 입력하신 이유가 궁금합니다.
0
305
2