728x90
반응형
마우스를 움직이면 따라다니는 효과를 준 페이지를 만들었습니다.
HTML
<!DOCTYPE html>
<html lang="ko">
<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>01. 마우스 이펙트</title>
</head>
<body class="img01 bg01 font01">
<header id="header">
<h1>Javascript Mouse Effect01</h1>
<p>마우스 이펙트 - 마우스 따라다니기</p>
<ul>
<li class="active"><a href="mouseEffect01.html">1</a></li>
<li><a href="mouseEffect02.html">2</a></li>
<li><a href="mouseEffect03.html">3</a></li>
<li><a href="mouseEffect04.html">4</a></li>
<li><a href="mouseEffect05.html">5</a></li>
<li><a href="mouseEffect06.html">6</a></li>
</ul>
</header>
<!-- //header-->
<main id="main">
<div class="mouse__wrap">
<div class="mouse__cursor"></div>
<div class="mouse__text">
<p><span class="s1">Life</span> is either a <span class="s2">great adventure</span> or <span class="s3">nothing</span>.</p>
<p><span class="s4">인생</span>은 <span class="s5">위대한 모험</span>이거나 아니면 <span class="s6">아무것도</span> 아니다.</p>
</div>
</div>
<div class="mouse__info">
<ul>
<li>clientX : <span class="clientX">0</span>px</li>
<li>clientY : <span class="clientY">0</span>px</li>
<li>offsetX : <span class="offsetX">0</span>px</li>
<li>offsetY : <span class="offsetY">0</span>px</li>
<li>pageX : <span class="pageX">0</span>px</li>
<li>pageY : <span class="pageY">0</span>px</li>
<li>screenX : <span class="screenX">0</span>px</li>
<li>screenY : <span class="screenY">0</span>px</li>
</ul>
</div>
</main>
<!-- //main-->
<footer id="footer">
<a href="mailto:hyejeong3283@gmail.com">hyejeong3283@gmail.com</a>
</footer>
<!-- //footer-->
</body>
</html>이벤트 속성
| 속성 | 설명 |
| clientX | X좌표 값 : 브라우저 기준 |
| clientY | Y좌표 값 : 브라우저 기준 |
| offsetX | X좌표 값 : 요소 기준 |
| offsetY | Y좌표 값 : 요소 기준 |
| pageX | X좌표 값 : 페이지 기준 |
| pageY | Y좌표 값 : 페이지 기준 |
| screenX | X좌표 값 : 디바이스 기준 |
| screenY | Y좌표 값 : 디바이스 기준 |
Script 코드
<script>
window.addEventListener("mousemove", function(event){
document.querySelector(".clientX").innerHTML = event.clientX;
document.querySelector(".clientY").innerHTML = event.clientY;
document.querySelector(".offsetX").innerHTML = event.offsetX;
document.querySelector(".offsetY").innerHTML = event.offsetY;
document.querySelector(".pageX").innerHTML = event.pageX;
document.querySelector(".pageY").innerHTML = event.pageY;
document.querySelector(".screenX").innerHTML = event.screenX;
document.querySelector(".screenY").innerHTML = event.screenY;
});
// 선택자
const cursor = document.querySelector(".mouse__cursor");
window.addEventListener("mousemove", function(e){
cursor.style.left = e.clientX - 25 + "px";
cursor.style.top = e.clientY - 25 + "px";
});
</script>마우스 움직임에 따라 마우스의 좌표값을 각 클래스명을 가진 태그에 텍스트로 보여준다.
window.addEventListener()는 윈도우 객체에서 발생하는 이벤트를 처리하기 위한 메서드로,
웹 페이지의 전체적인 동작에 영향을 미치는 이벤트들을 처리할 때 사용합니다.
마우스커서 위치에 따라 만들어준 동그라미모양의 div가 따라가게 해주는 이벤트 메서드입니다.
document.querySelector(".s1").addEventListener("mouseover", function(){
cursor.classList.add("s1");
});
document.querySelector(".s1").addEventListener("mouseout", function(){
cursor.classList.remove("s1");
});
document.querySelector(".s2").addEventListener("mouseover", function(){
cursor.classList.add("s2");
});
document.querySelector(".s2").addEventListener("mouseout", function(){
cursor.classList.remove("s2");
});
document.querySelector(".s3").addEventListener("mouseover", function(){
cursor.classList.add("s3");
});
document.querySelector(".s3").addEventListener("mouseout", function(){
cursor.classList.remove("s3");
});
document.querySelector(".s4").addEventListener("mouseover", function(){
cursor.classList.add("s4");
});
document.querySelector(".s4").addEventListener("mouseout", function(){
cursor.classList.remove("s4");
});
document.querySelector(".s5").addEventListener("mouseover", function(){
cursor.classList.add("s5");
});
document.querySelector(".s5").addEventListener("mouseout", function(){
cursor.classList.remove("s5");
});
document.querySelector(".s6").addEventListener("mouseover", function(){
cursor.classList.add("s6");
});
document.querySelector(".s6").addEventListener("mouseout", function(){
cursor.classList.remove("s6");
});s1이라는 클래스명을 가진 태그에 마우스를 올리면 mouse__cursor클래스를 가진 div에 s1클래스명을 추가해준다.
s1이라는 클래스명을 가진 태그에 마우스를 떼면 mouse__cursor클래스를 가진 div에 s1클래스명을 삭제해준다.
동일한 내용의 기능을 s1~s6 클래스를 가진 태그에 동일하게 적용시킨다.
위에 메서드를 for(), forEach(), getAttribute() 를 사용해 간결하게 만들어봤다.
for()
for(let i=1; i<=6; i++){
document.querySelector(".s"+i).addEventListener("mouseover", function(){
cursor.classList.add("s"+i);
});
document.querySelector(".s"+i).addEventListener("mouseout", function(){
cursor.classList.remove("s"+i);
});
}for문의 i값을 사용해서 s1~s6까지 이벤트들을 선언해줍니다.
forEach()
document.querySelectorAll(".mouse__text span").forEach(function(span, num){
span.addEventListener("mouseover", function(){
cursor.classList.add("s"+(num+1));
});
span.addEventListener("mouseout", function(){
cursor.classList.remove("s"+(num+1));
});
});mouse__text클래스를 가진 태그 안에 span의 수만큼 반복문을 실행하여 s1~s6까지 이벤트를 추가해줍니다.
num 값은 0부터 시작하므로 s1~s6가 되려면 num 값에 +1을 더해줍니다.
getAttribute()
document.querySelectorAll(".mouse__text span").forEach(function(span){
let attr = span.getAttribute("class");
// attr = s1 s2 s3 s4 s5 s6
span.addEventListener("mouseover", function(){
cursor.classList.add(attr);
});
span.addEventListener("mouseout", function(){
cursor.classList.remove(attr);
});
});getAttribute() 은 해당 요소에 지정된 값을 반환 합니다.
mouse__text 클래스명을 가진 영역 내의 span의 수만큼 반복문을 실행합니다.
span의 class명을 가져와 attr 변수에 저장합니다. (attr = s1,s2,s3,s4,s5,s6)
이벤트 메서드 속성 정리 addEventListener("")
| 속성 | 설명 |
| mousedown | 마우스 버튼을 클릭했을 때 |
| mouseup | 마우스 버튼을 떼는 경우 |
| mousemove | 마우스를 움직이는 경우 |
| mouseenter | 요소 위에 포인터 요소 위치가 있을 때 |
| mouseleave | 요소 위에 포인터 요소 위치가 벗어났을 때 |
| mouseover | 요소 위에 포인터 요소 위치가 있을 때 |
| mouseout | 요소 위에 포인터 요소 위치가 벗어났을 때 |