mouse event
- mousemove : 마우스가 움직일 때 발생하는 이벤트
- touchmove
- mousedown : 마우스 클릭 순간 발생하는 이벤트
- touchmove
- mouseup : 마우스 클릭 후 뗄 때 발생하는 이벤트
- e.clientX : 마우스의 위치
- e.touches[\idx]
- e.changedTouches[\idx]
- html 요소들은 잡아서 끌 수 있으므로 draggable을 false로 태그에 지정해준다.
<!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>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" 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>
</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="id">
</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){
if ($("#id").val().trim() == "") {
alert("아이디를 입력해주세요");
e.preventDefault();
} else if ($("#password").val().trim() == "") {
alert("비밀번호를 입력해주세요");
e.preventDefault();
} else if ($("#password").val().length < 6) {
alert("비밀번호를 여섯 자리 이상");
e.preventDefault();
} else if (!(/\S+@\S+\.\S+/.test($("#id").val()))) {
console.log("읭?")
alert("이메일 형식안맞음");
e.preventDefault();
}
})
</script>
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</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>
<script>
document.querySelector(".navbar-toggler").
addEventListener("click", function(){
document.querySelector(".list-group").classList.toggle("show");
})
</script>
<div class="main-bg">
<h4>Shirts on Sale</h4>
<button class="btn btn-danger" id="login">로그인</button>
</div>
<script>
$('#login').on('click', function(){
$('.black-bg').addClass('show-modal');
});
$('#close').on('click', function(){
$('.black-bg').removeClass('show-modal');
});
</script>
<div style="overflow: hidden">
<div class="slide-container">
<div class="slide-box" id="1">
<img src="car1.png" draggable="false">
</div>
<div class="slide-box" id="2">
<img src="car2.png" draggable="false">
</div>
<div class="slide-box" id="3">
<img src="car3.png" draggable="false">
</div>
</div>
</div>
<script>
var start = 0;
$('.slide-box').eq(0).on('mousedown', function(e) {
start = e.clientX;
down = true;
});
$('.slide-box').eq(0).on('mousemove', function(e) {
if (down) {
$('.slide-container').css('transform',
`translateX(${e.clientX - start}px)`)
}
});
$('.slide-box').eq(0).on('mouseup', function(e) {
down = false;
})
</script>
<button class="slide-1">1</button>
<button class="slide-2">2</button>
<button class="slide-3">3</button>
<button class="next">다음</button>
<button class="prev">이전</button>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>.black-bg {
width : 100%;
height: 100%;
position: fixed;
background: rgba(0,0,0,0.5);
z-index : 5;
padding: 30px;
/* display: none; */
visibility: hidden;
opacity: 0;
transition: all 1s;
}
.white-bg {
background: white;
border-radius: 5px;
padding: 30px;
}
.show-modal {
visibility: visible;
opacity: 1;
}
.list-group {
display: none;
}
.show {
display: block;
}
.slide-container {
width: 300vw;
transition: all 1s;
}
.slide-box {
width: 100vw;
float: left;
}
.slide-box img {
width: 100%;
}- 터치, 마우스 등을 모두 처리해주는 라이브러리 : Hammer.js
- 브라우저 호환성, 이벤트리스너 축소, 스와이프 등 기능 제공
OnePunchLotto