<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 250px;
height:188px;
border: 10px solid dodgerblue;
overflow: hidden;
}
#list {
/* outline: 10px solid tomato; */
width: 1250px;
display: flex;
transition: 1s all;
transition-timing-function: linear;
}
/* #box:hover #list {
transform: translate(-250px, 0);
} */
</style>
</head>
<body>
<h1>고양이</h1>
<div id="box">
<div id="list">
<img src="images/cat01.jpg">
<img src="images/cat02.jpg">
<img src="images/cat03.jpg">
<img src="images/cat04.jpg">
<img src="images/cat05.jpg">
</div>
</div>
<hr>
<select id="sel">
<option value="0">고양이1</option>
<option value="1">고양이2</option>
<option value="2">고양이3</option>
<option value="3">고양이4</option>
<option value="4">고양이5</option>
</select>
<script>
const sel = document.getElementById('sel'); //셀렉트 박스
const list = document.getElementById('list');
let old = 0; //이전 고양이 value
sel.addEventListener('change', function() { //셀렉트 박스에 변화가 있을 시(옵션 선택 시)
// alert(Math.abs(event.target.value - old));
list.style.transitionDuration = `${Math.abs(event.target.value - old) * 0.5}s`; //이미지가 변하는데 걸리는 시간
list.style.transform = `translate( -${event.target.value * 250}px, 0)`; //원하는 이미지가 나오는 위치(x좌표값만 이동)
old = event.target.value;
});
※ transitionDuration : transition 속성 변화에 걸리는 시간
</script>
</body>
</html>
'[HTML | CSS | JavaScript | jQuery] 정리 > JavaScript' 카테고리의 다른 글
| JavaScript - CSS 스크롤 이동 애니메이션 (0) | 2023.05.08 |
|---|---|
| JavaScript - CSS 이미지를 연결시켜서 애니메이션 효과 주기 (0) | 2023.05.08 |
| JavaScript - CSS 접었다가 클릭하면 열기 (0) | 2023.05.08 |
| JavaScript - CSS 상자 돌리기(rotate) (0) | 2023.05.08 |
| JavaScript - CSS element(s)FromPoint() (0) | 2023.05.08 |