마우스로 잡아 끌면 다음 사진이 나오게 하기
기능1. 드래그한 거리만큼 사진도 왼쪽으로 움직여야한다
기능2. 마우스를 떼었을 때 일정거리 이상 이동했으면 사진2를 보여주고 아니면 사진1을 보여준다
기능1 먼저 만들기 위해서는 알아야 할 이벤트가 3가지 있다
mouse 이벤트 3개
마우스로 어떤 html요소를 조작할 때 발생하는 이벤트
- mousedown (어떤 요소에 마우스버튼 눌렀을 때)
- mouseup (어떤 요소에 마우스버튼 뗐을 때)
- mousemove (어떤 요소위에서 마우스 이동할 때)
click 이벤트는 mousedown과 mouseup을 합친 이벤트!
<script>
$('.slide-box').eq(0).on('mousemove', function(e){
console.log(e.clientX)
})
</script>mouse어쩌구 이벤트리스너 안에선 e.clientX, e.clientY (현재 마우스 좌표) 를 출력해볼 수 있다
-> 이걸로 사진을 얼마나 드래그했는지 알 수 있다!
기능1. 사진1을 왼쪽으로 드래그 한 거리만큼 사진1도 왼쪽으로 움직여야함
ex) 사진 1을 클릭하고 왼쪽으로 50px만큼 드래그했다면
사진1도 왼쪽으로 50px 움직여아한다
하지만 우리는 지난시간에 했던 것 처럼 사진 3개가 담긴 큰 박스를 움직이면 된다!
Q. 이동거리는 어떻게 알 수 있나요?
A. "마우스를 누를 때의 X 좌표 - 마우스 움직일 때의 X좌표" 를 구하면 됩니당
<script>
$('.slide-box').eq(0).on('mousedown', function(e){
e.clientX ← 이거랑
});
$('.slide-box').eq(0).on('mousemove', function(e){
e.clientX ← 이거를 빼면 됨
});
</script>(주의) 모든 변수는 범위가 있어서 function함수 바깥으로는 나갈 수 없다!
하지만 함수 바깥에 있던 변수는 함수 안에서 맘대로 쓸 수 있기 때문에
함수 바깥에 변수를 만들어(전역변수) 함수들끼리 변수 공유 할 수 있게 만들기
<script>
let 시작좌표 = 0;
$('.slide-box').eq(0).on('mousedown', function(e){
시작좌표 = e.clientX;
});
$('.slide-box').eq(0).on('mousemove', function(e){
console.log(e.clientX - 시작좌표)
});
</script>- 시작좌표라는 변수를 함수 바깥에 만들어주기
- 마우스 클릭 시 현제 좌표를 let 시작좌표에 저장하기
- mousemove 이벤트 발생 시 let 시작좌표와 현재좌표인 e.clientX 빼기
이걸 출력해보면 현재 이동거리가 잘 나오고 왼쪽으로 드래그하면 -100이 출력되고 오른쪽으로 드래그하면 100 으로 출력된다
이동거리만큼 이미지 들어있는 박스도 이동하기
<script>
let 시작좌표 = 0;
$('.slide-box').eq(0).on('mousedown', function(e){
시작좌표 = e.clientX;
});
$('.slide-box').eq(0).on('mousemove', function(e){
console.log(e.clientX - 시작좌표)
$('.slide-container').css('transform', `translateX( ${e.clientX - 시작좌표}px )`)
});
</script>예전에 translateX를 조절하면 박스가 왼쪽으로 오른쪽으로 이동한 걸 이용하기!
클릭을 해도 잘 안움직이는 이유
컴퓨터에게 "클릭하고나서만 박스를 이동해주세요" 라고 명령을 내려야한다
<script>
let 시작좌표 = 0;
$('.slide-box').eq(0).on('mousedown', function(e){
시작좌표 = e.clientX;
});
$('.slide-box').eq(0).on('mousemove', function(e){
if (마우스눌렀는지확인) {
$('.slide-container').css('transform', `translateX( ${e.clientX - 시작좌표}px )`)
}
});
</script>마우스를 눌렀는지 확인하는 방법은 mousedown 이벤트리스너를 사용하면 된다
<script>
let 시작좌표 = 0;
let 누름 = false;
$('.slide-box').eq(0).on('mousedown', function(e){
시작좌표 = e.clientX;
누름 = true;
});
$('.slide-box').eq(0).on('mousemove', function(e){
if (누름 === true) {
$('.slide-container').css('transform', `translateX( ${e.clientX - 시작좌표}px )`)
}
});
</script>- 마우스를 누르면 let누름 변수를 true로 만들라고 코드짜기
- if문에서는 let 누름이 true일때만 박스를 움직이라고 코드짜기
오늘의 숙제: 기능2 만들기
<script>
// 마우스에서 누르고 손을 놓을 때 200px 이상 이동했으면 둘째사진이 보이고
// 아니면 첫째사진이 보이게
$(".slide-box").eq(0).on("mouseup", function (e) {
누름 = false;
if (시작좌표 - e.clientX >= 200) {
$(".slide-container").css("transform","translateX(-100vw)");
} else {
$(".slide-container").css("transform","translateX(0vw)");
}
});
</script>먼저 한글로 어떻게 코드를 짜야하는지 작성 후 if문 사용하기!
