☭DEVELOPER/#2 웹개발(자바기반 풀스택)

비주얼 스튜디오 코드 81_마우스오버효과_자바스크립트

조반짝 2023. 7. 19. 14:00
728x90
반응형

html mark up

main: 가장중요한 부분을 넣어주는 태그

좌표 만들기

css  reset

.bottom css edit

배경색: body의 백그라운드 컬러 / 컬러가 지정되어있으면 반드시 넣어야한다.

배경에 사진넣기

.contents css edit

.cursor css edit

.cursorl.on css edit

javascript

마우스 도형 움직이기

 

윈도우에 있는 마우스를 움직였을 때 이벤트를 발생해라

window.addEventListener("mousemove",e => {
            
        });

 

jqeury : $(). =  javascript : document.querySelector()

마우스를 움직였을 때 html의 x값 좌표를 출력해라.

나머지 클래스도 좌표값 넣기

좌표를 마우스도형에 넣어주기

css = style

X축만 마우스가  움직인다.

50*50px 크기의 커서이기 때문에 마우스를 동그라미커서 도형 정중앙에 보내기 위해 

-25px 를 한다.

좌표를 마우스 도형에 넣어주기 방법2

 마우스를 움직이면 좌표값이 나오는 것을 콘솔에서 확인할 수 있다.

.cssText : 요소에 설정된 모든 인라인 css 속성 값을 텍스트로 가져오거나 설정할 때 사용

left:+x+ ;top:+y;

=

"left:"+x+";top:"+y;

cursor.on 이벤트 넣기

pointer, seclect 초기화하기

            document.querySelector(".contents em").addEventListener("mouseenter",()=>{
                document.querySelector(".cursor").classList.add("on");
            });
            document.querySelector(".contents em").addEventListener("mouseleave",()=>{
                document.querySelector(".cursor").classList.remove("on");
            });

javascript는 반복을 하지 않기 때문에 em이 두개가 있어도 하나에만 적용이 된다.

그래서 다중으로 선택해야함

다중선택하기

em이 두개니까 querySelector > querySelectorAll 사용하면 안됨?

안됨

>> em이라는 변수를 지정해준다.

let em = document.querySelectorAll(".contents em");

.length 는 갯수를 찾아주는 명령어

console 확인시 em이 2개인 것을 알 수 있다.

em의 0번째, 1번째 아이는 red로 조건이 충족되기 때문에 색이 빨간색으로 변경됨

em을 다중으로 마우스 색 변경하기

el > i  값

for문은 foreach문 안에 포함됨

el : 0번째, 1번째 아이를 돌려주는 역할을 함

<= , < 는 돌아가는 횟수가 다르다.

<= : 3번 [0, 1, 2 ]

< : 2번[0, 1]

for(let i=0; i <= em.length;i++){}

for문

for문으로 중복 선택가능하다.

let em = document.querySelectorAll(".contents em");
            // em[0], em[1]
            for(let i=0; i <= em.length;i++){
                em[i].style.color="red";
            }

for문을 foreach문에 넣어야함

   //foreach문
            document.querySelectorAll(".contents em").forEach(el =>{
                el.addEventListener("mouseenter",()=>{
                    document.querySelector(".cursor").classList.add("on");
                });
                el.addEventListener("mouseleave",()=>{
                    document.querySelector(".cursor").classList.remove("on");
                });
            });

<HTML>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=], initial-scale=1.0">
    <title>마우스오버효과_자바스크립트 사용</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <main>
        <div class="cursor"></div>
        <div class="contents">
            <p>Never <em>underestimate</em> your own ignorance</p>
            <p>네 자신의 무지를 절대 <em>과소평가</em> 하지마라.</p>
        </div>
    </main>
    <div class="bottom">
        <ul>
            <li>clientX : <span class="clientX">0</span></li>
            <li>clientY : <span class="clientY">0</span></li>
            <li>offsetX : <span class="offsetX">0</span></li>
            <li>offsetY : <span class="offsetY">0</span></li>
            <li>pageX : <span class="pageX">0</span></li>
            <li>pageY : <span class="pageY">0</span></li>
            <li>screenX : <span class="screenX">0</span></li>
            <li>screenY : <span class="screenY">0</span></li>
            
        </ul>
    </div>

    <script>

        //마우스 도형 움직이기
        window.addEventListener("mousemove",(e)=>{

            let x = e.clientX -25 + "px";
            let y = e.clientY -25 + "px";
            document.querySelector(".cursor").style.cssText = "left :"+x+";top :"+y;
            // left : 25px;top : 25px;
            // console.log("x :",x);
            // console.log("y :",y);

            // document.querySelector(".cursor").style.left=e.clientX - 25 + "px";
            // document.querySelector(".cursor").style.top=e.clientY - 25 + "px";

            //foreach문
            document.querySelectorAll(".contents em").forEach(el =>{
                el.addEventListener("mouseenter",()=>{
                    document.querySelector(".cursor").classList.add("on");
                });
                el.addEventListener("mouseleave",()=>{
                    document.querySelector(".cursor").classList.remove("on");
                });
            });

            //for문
            // let em = document.querySelectorAll(".contents em");
            // // em[0], em[1]
            // for(let i=0; i <= em.length;i++){
            //     em[i].style.color="red";
            // }

            // javascript는 복수 클래스 처리가 불가능함
            // document.querySelector(".contents em").addEventListener("mouseenter",()=>{
            //     document.querySelector(".cursor").classList.add("on");
            // });
            // document.querySelector(".contents em").addEventListener("mouseleave",()=>{
            //     document.querySelector(".cursor").classList.remove("on");
            // });
        });    


        // 좌표를 마우스 도형에 넣어주기

        // window.addEventListener("mousemove",e => {
        //     let x = e.clientX -25 + "px";
        //     let y = e.clientY -25 + "px";
        //     document.querySelector(".cursor").style.cssText = "left:"+x+";top:"+y;

        //     //em 색상 모두 변경하기
        //     document.querySelectorAll(".contents em").forEach(el =>{
        //         el.addEventListener("mouseenter",()=>{
        //             document.querySelector(".cursor").classList.add("on");
        //         });
        //         el.addEventListener("mouseleave",()=>{
        //             document.querySelector(".cursor").classList.remove("on");
        //         });
        //     });

        //     다중으로 선택하기
        //     document.querySelectorAll(".contents em").style.color = "#f00"
        //     let em = document.querySelectorAll(".contents em");
        //     for(let i=0;i<em.length;i++){
        //         em[i].style.color = "red";
        //     }
        //     console.log(em.length);
            

        //     left:+x+ ;top:+y; 

        //     .cssText : 요소에게 설정된 모든 인라인 css속성 값을 텍스트로 가져오거나 설정할 때 사용
        //     console.log("x : ",x);
        //     console.log("y : ",y);


        //     document.querySelector(".contents em").addEventListener("mouseenter",()=>{
        //         document.querySelector(".cursor").classList.add("on");
        //     });
        //     document.querySelector(".contents em").addEventListener("mouseleave",()=>{
        //         document.querySelector(".cursor").classList.remove("on");
        //     });
        // });

        // window.addEventListener("mousemove",e=>{
        //     document.querySelector(".cursor").style.left = e.clientX - 25 + "px";
        //     document.querySelector(".cursor").style.top = e.clientY -25 + "px";
        // });

        //마우스 도형 움직이기
        window.addEventListener("mousemove",e => {
            document.querySelector(".clientX").innerHTML = e.clientX;
            document.querySelector(".clientY").innerHTML = e.clientY;
            document.querySelector(".offsetX").innerHTML = e.offsetX;
            document.querySelector(".offsetY").innerHTML = e.offsetY;
            document.querySelector(".pageX").innerHTML = e.pageX;
            document.querySelector(".pageY").innerHTML = e.pageY;
            document.querySelector(".screenX").innerHTML = e.screenX;
            document.querySelector(".screenY").innerHTML = e.screenY;
        });
    </script>
</body>
</html>

<CSS>

@charset "utf-8";

*,
*::after,
*::before{
    box-sizing: border-box;
    margin: 0;
    padding: 0;  
}
li{
    list-style: none;
}
body{
    background: url(../KakaoTalk_20230719_104650059.png)center center no-repeat;
    background-size: cover;
    height: 100vh;
    position: relative;
}
body::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: darkgreen;
    opacity: 0.9;
    z-index: -1;
    cursor: none;
}
.bottom{
    position: absolute;
    bottom: 20px;
    left: 20px;
}
.bottom li{
    font-size: 16px;
    line-height: 1.5;
}
.contents{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
.contents p{
    max-width: 70vw;
    font-size: 3vw;
    white-space: nowrap;
    line-height: 1.5;
}
.contents p:first-of-type{
    font-size: 2.5vw;
}

.contents p em{
    color: orange;
    border-bottom:  2px dashed orange;
    font-style: normal;
}
.cursor{
    width: 50px;
    height: 50px;
    position: absolute;
    left: 100px;
    top: 300px;
    background-color: rgba(255, 255, 255, 0.3);
    border: 3px solid #fff;
    border-radius: 50%;
    z-index: 1000;
    transition: background-color 0.2s, border-color 0.3s;
    user-select: none;
    pointer-events: none;
}
.cursor.on{
    background-color: rgba(255, 165, 0, 0.3);
    border-color: orange;
    
    
}
728x90
반응형
저작자표시 비영리 변경금지

'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글

[JAVASCRIPT]for문  (0) 2023.07.20
비주얼 스튜디오 코드 82_반응형 웹갤러리  (0) 2023.07.19
[JAVASCRIPT]선택문(Switch-case)  (0) 2023.07.19
비주얼 스튜디오 코드 80_ 마우스 오버 효과_제이쿼리  (0) 2023.07.18
비주얼 스튜디오 코드 79_뮤직 플레이어 3  (0) 2023.07.18

'☭DEVELOPER/#2 웹개발(자바기반 풀스택)'의 다른글

  • 현재글비주얼 스튜디오 코드 81_마우스오버효과_자바스크립트

관련글

티스토리툴바