-
글쓴이글
-
2022년 4월 29일 22:38 #32902
조승엽참가자드래그할때 1번사진에서 2번사진으로 드래그 할때는 잘 움직이는데 다른사진에서 누른후 살짝만 드래그해도 1번사진으로 바뀌면서 거기서 움직이더라고요. 어떻게 하는지도 궁금하지만요. 시도해본것중에 먼저 다음 이전 버튼을 vw가 아닌 px로 바꿨는데요.
`translateX(${ (지금사진-1)*-window.innerWidth }px 는 잘 되는데
mouseup은 $('.next')click() 로 바꾸고
mousemove안에선
translateX(${ ((지금사진-1)*-window.innerWidth)-(e.clientX - 시작좌표) }px)는 꿈쩍도 안하더라고요.이것도 왜 그런지 모르겠네요.
2022년 4월 30일 11:26 #32926
조승엽참가자<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="main.css"><script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script><title>Hello, world!</title>
</head>
<body><div class="black-bg">
<div class="white-bg">
<h4>로그인하세요.</h4>
<form action="success.html">
<div class="my-3">
<input type="text" class="form-control" id="email">
</div>
<div class="my-3">
<input type="password" class="form-control" id="password">
</div>
<button type="submit" class="btn btn-primary" id="send">전송</button>
<button type="button" class="btn btn-danger" id="close">닫기</button>
</form>
</div>
</div><script>
$('form').on('submit',function (e) {
let 입력한이메일 = $('#email').val();
let 입력한비번 = $('#password').val();
if( 입력한이메일 == ''){
alert('아이디를 입력하세요.');
e.preventDefault();
}else{
if(!/\S+@\S+\.\S+/.test(입력한이메일)){
alert('이메일형식아님')
e.preventDefault();
}else{
if(입력한비번.length < 6){
alert('비번이 짧습니다.');
e.preventDefault();
}else if(!/[A-Z]/.test(입력한비번)){
alert('비번에 대문자를 적어도 하나이상 추가하십시오.');
e.preventDefault();
}
}
}
})
</script>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand">Navbar</span>
<span class="badge bg-dark">Dark 🔁</span>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="scroll-gauge">
<div class="scroll-gauge-percent"></div>
</div>
</nav>
<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul><div class="main-bg">
<h4>Shirts on sale</h4>
<button type="button" class="btn btn-danger" id="login">로그인</button>
</div><div class="lorem" style="width: 200px; height: 100px; overflow-y: scroll;"> lorem af jkdhf adhflkjadshfkjWHEFU hdFdjhlksjgh jhvzxkjcvj zksd hafhawoeifh shfkjWHEFU hdFdjhlksjgh jhvzxkjcvj zksd haf sjgh jhvzxkjcvj zksd hafhawoeifh shfkjWHEFU haw sjgh jhvzxkjcvj zksd hafhawoeifh shfkjWHEFU sjgh jhvzxkjcvj zksd hafhawoeifh shfkjWHEFU sjgh jhvzxkjcvj zksd hafhawoeifh shfkjWHEFU sjgh jhvzxkjcvj zksd hafhawoeifh shfkjWHEFU sjgh jhvzxkjcvj zksd hafhawoeifh shfkjWHEFU sjgh jhvzxkjcvj zksd hafhawoeifh shfkjWHEFU sjgh jhvzxkjcvj zksd hafhawoeifh shfkjWHEFU sjgh jhvzxkjcvj zksd hafhawoeifh shfkjWHEFU sjgh jhvzxkjcvj zksd hafhawoeifh shfkjWHEFU sjgh jhvzxkjcvj zksd hafhawoeifh shfkjWHEFU sjgh jhvzxkjcvj zksd hafhawoeifh shfkjWHEFU sjgh jhvzxkjcvj zksd hafhawoeifh shfkjWHEFU sjgh jhvzxkjcvj zksd hafhawoeifh shfkjWHEFU </div>
<div style="height: 1000px;"></div>
<div style="overflow: hidden;">
<div class="slide-container">
<div class="slide-box">
<div class="slide-frame">
<img src="img/product1.jpg" draggable="false">
</div>
</div>
<div class="slide-box">
<div class="slide-frame">
<img src="img/product2.jpg" draggable="false">
</div>
</div>
<div class="slide-box">
<div class="slide-frame">
<img src="img/product3.jpg" draggable="false">
</div>
</div>
<div style="clear: both;"></div>
</div>
</div><button class="slide-1">1</button>
<button class="slide-2">2</button>
<button class="slide-3">3</button>
<button class="next">다음</button>
<button class="before">이전</button><script>
let 시작좌표 = 0;
let 눌렸냐 = false;
let 지금사진 = 1;
$('.next').on('click',function(){
if(지금사진 < 3){
지금사진 += 1;
$('.slide-container').css('transition','all 0.5s').css('transform',translateX(${(지금사진-1)*-window.innerWidth}px));
}
});
$('.before').on('click',function(){
if(지금사진 > 1){
지금사진 -= 1;
$('.slide-container').css('transition','all 0.5s').css('transform','translateX('+ (지금사진-1)*-window.innerWidth +'px)');
}
});$('.slide-1').on('click',function(){
$('.slide-container').css('transition','all 0.5s').css('transform','translateX(0vw)');
지금사진 = 1;
});
$('.slide-2').on('click',function(){
$('.slide-container').css('transition','all 0.5s').css('transform',translateX(-${window.innerWidth}px));
지금사진 = 2;
});
$('.slide-3').on('click',function(){
$('.slide-container').css('transition','all 0.5s').css('transform','translateX(-200vw)');
지금사진 = 3;
});// --------------------------마우스
$('.slide-box').on('mousedown',function(e){
시작좌표 = e.clientX;
눌렸냐 = true;
$('.slide-container').css('transition','none')
})$('.slide-box').on('mousemove',function(e){
if(눌렸냐){
$('.slide-container').css('transform',translateX( ${((지금사진-1)*-window.innerWidth)-(e.clientX - 시작좌표)} px));
}
})$('.slide-box').on('mouseup',function(e){
눌렸냐 = false;
if(e.clientX - 시작좌표 < -150){
$('.next').click();
}else if(e.clientX - 시작좌표 > 150){
$('.before').click();
}else{
$('.slide-container').css('transform','translateX('+ (지금사진-1)*-window.innerWidth +'px)');
}
})// --------------------------터치
$('.slide-box').eq(0).on('touchstart',function(e){
// mousedown -> touchstart
시작좌표 = e.touches[0].clientX;
눌렸냐 = true;
$('.slide-container').css('transition','none')
})$('.slide-box').eq(0).on('touchmove',function(e){
// mousemove -> touchmove
if(눌렸냐){
console.log('누름')
console.log(e.touches[0].clientX - 시작좌표)
$('.slide-container').css('transform',translateX(${e.touches[0].clientX - 시작좌표}px));
}else{
console.log('땜')
}
})$('.slide-box').eq(0).on('touchend',function(e){
// mouseup -> touchend
눌렸냐 = false;
if(e.changedTouches[0].clientX - 시작좌표< -150){
$('.slide-container').css('transition','all 0.5s').css('transform',translateX(-100vw))
}else{
$('.slide-container').css('transition','all 0.5s').css('transform',translateX(0vw))
}
})</script>
<script>
$('.lorem').on('scroll',function(){
var 스크롤양 = $('.lorem').scrollTop();
var 눈에보이는박스높이 = $('.lorem').innerHeight();
var 실제높이 = $('.lorem').prop('scrollHeight');if(스크롤양 + 눈에보이는박스높이 > 실제높이 - 10){
alert('다읽었군요.')
}
})$(window).on('scroll',function(){
let 현재스크롤위치 = $(window).scrollTop();
let 눈에보이는박스높이 = $(window).innerHeight();
let 실제높이 = $('body').prop('scrollHeight');if( 현재스크롤위치 > 100){
$('.navbar-brand').css('fontSize','25px');
$('.scroll-gauge-percent').width(${현재스크롤위치/(실제높이-눈에보이는박스높이)*100}%);
}else{
$('.navbar-brand').css('fontSize','30px');
$('.scroll-gauge-percent').width(0%);
}
})let count = 0;
$('.badge').on('click',function(){
count++;
if(count % 2 == 1){
$('.badge').text('Light 🔁')
$('body').addClass('dark');
}else{
$('.badge').text('Dark 🔁');
$('body').removeClass('dark');
}
})$('#login').on('click',function () {
$('.black-bg').addClass('show-modal');
});$('#close').on('click',function () {
$('.black-bg').removeClass('show-modal');
});$('.black-bg').on('click',function(e){
if(e.target == e.currentTarget){
$('.black-bg').removeClass('show-modal');
}
})
document.getElementsByClassName('navbar-toggler')[0].addEventListener('click',function(){
document.getElementsByClassName('list-group')[0].classList.toggle('show');
})
</script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>2022년 4월 30일 20:18 #32944
codingapple키 마스터((지금사진-1)*-window.innerWidth)-(e.clientX-시작좌표)
수식부터 콘솔창에 출력해보면 됩니다 2번사진 건드리고 있으면 지금사진이라는 변수도 2로 잘 나오는지 확인해봅시다
2022년 4월 30일 22:39 #32958
조승엽참가자콘솔창에 입력했을때 지금사진은 해당사진일때 사진은 안움직이고 거기에 맞게 나오더라고요. 또 이해가 안가는 부분이 mousemove에서
$('.slide-container').css('transform',translateX(${e.clientX-시작좌표}px)); 가 첫번째사진일땐 잘움직였고 ,$('.slide-container').css('transform',translateX(${((지금사진-1)*-window.innerWidth)-(e.clientX-시작좌표)}px));는 앞에것과 콘솔로그 찍으면 숫자는 같은데 첫번째 사진일때도 안움직이더라고요.
2022년 5월 1일 09:36 #32971
codingapple키 마스터붙여넣어보니까
translateX(${((지금사진-1)*-window.innerWidth)+(e.clientX-시작좌표)}px)
이러면 잘되는 것 같은데요
2022년 5월 2일 11:32 #33049
조승엽참가자제꺼는 왜 안되는지 모르겠네요. 관련은 없을지라도 일단 css마저 올릴께요. 혹시 또 다른 방법은 어떤게 있나요?
body{
margin: 0;
}
div{
box-sizing: border-box;
}.list-group{
display: none;
}
.show{
display: block;
}.black-bg{
width: 100%;
height: 100%;
position: fixed;
background-color: rgba(0,0,0,0.5);
z-index: 6;
padding: 30px;
visibility: hidden;
opacity: 0;
transition: all 1s;
}
.show-modal{
visibility: visible;
opacity: 1;
}
.white-bg{
background-color: white;
border-radius: 5px;
padding: 30px;
}
.main-bg{
padding: 100px 20px;
background-color: lightgray;
}.dark{
background-color: black;
color: white;
}
/* .slide-container{
width: 300vw;
transition: all 1s;
} */
.slide-container{
width: 300vw;
}
.trasition-1s{
transition: all 1s;
}.slide-box{
width: 100vw;
float: left;
}
.slide-frame{
width: 70%;
margin: auto;
}
.slide-box img{
width: 100%;
}.navbar{
position: fixed;
width: 100%;
z-index: 5;
}
.navbar-brand{
font-size: 30px;
transition: all 1s;
}
.scroll-gauge{
width: 100%;
height: 2px;
background-color: lightgray;
}
.scroll-gauge-percent{
width: 0%;
height: 2px;
background-color: brown;
}2022년 5월 2일 16:06 #33068
codingapple키 마스터지금사진이라는 변수도 잘 있는지 출력해봐야할듯요
https://github.com/codingapple1/carousel-touch-test 위에있는 코드 중에 캐러셀부분만 붙여넣기해봤는데 2번사진도 마우스로 드래그 잘됩니다
-
글쓴이글
- 답변은 로그인 후 가능합니다.