inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]

강사님 도와주세요!

183

LeeGunWoo

작성한 질문수 65

0

제가 하려고 해도 어떤 부분이 왜 안되는지 전혀 모르겠습니다. ㅠㅠ 

Console에 문제가 생겼다고 하지도 않은데 왜 안되는지 모르겠습니다. ㅠㅠ

빨간 박스가 전혀 움직이지 않고 
undefined만 뜹니다.ㅠㅠ

<!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>Mouse의 움직임</title>
    <style>
        body{
            background-color: rgb(255, 182, 93);
            position: relative;
        }
        h1{
            color: #000;
        }
        .cursor_item {
            position: absolute;
            width : 100px;
            height : 100px;
            background-color: red;
            top: 0;
            left: 0;
        }
    </style>
    <script>
        window.onload = function(){
            let h1 = document.getElementsByTagName("h1")[0]; //Tag이름으로 선택  
            let cursor_item = document.getElementsByClassName("cursor_item")[0];//클래스 이름으로 선택

            window.addEventListener("mousemove", mouseFunc,false);

            function mouseFunc(e){
                h1.innerHTML = "x: " + e.clinetX + "y: " + e.clinetY;
                //console.log(e.clinetX, e.clinetY);
                cursor_item.style.transform = "translate(" +e.clinetX + "px," + e.clinetY +  "px)";
            }
        }
    </script>
</head>
<body>
    <h1>test</h1>
    <div class="cursor_item"></div>
</body>

</html>
 
 
 

javascript 인터랙티브-웹

답변 1

1

코딩일레븐

안녕하세요 답변이 늦었습니다.

확인해보니 오타가 있으셨네요.

아래처럼 수정해서 해보시면 될 겁니다.

열공하세요~!

console.log(e.clientX, e.clientY);

 

 

0

LeeGunWoo

너무 감사합니다! 요즘 강사님의 강의에 푹빠졌습니다! 
그런데 궁금한 점이 더 있는데요! 
모바일에서는 어떻게 해야 할까요! ?

0

코딩일레븐

위의 이벤트는 마우스 무브 이벤트라 안 되고요.

마우스 클릭이벤트로 좌표 찍히나 테스트 한 번 해보세요.

그리고 '터치이벤트'를 검색해보세요. 원리는 같습니다. Touchmove 

잘 안되시면 다시 질문 남겨주세요

mouse position interpolation과 transition linear interpolation의 차이

0

95

1

mousemove 시 따라 다니는 커서 이미지 wheel 할 경우

0

205

2

부드러운 움직임 구현1 강의 부분 질문있습니다.

0

166

2

go live 실시간 크롬

0

337

1

javascript 도움말 vsCode 확장팩 문의!

0

379

1

블로그 상단 페럴렉스 효과 구현 질문 있습니다!

0

367

1

마우스 인터렉티브 변형 질문

0

350

1

안녕하세요. 수업 잘 듣고 있습니다. 포트폴리오 관련 질문도 가능할까요?

0

406

1

나비가 버튼위로올라가면 버튼의 hover기능이 멈춰버려요

0

356

1

perspective에 대해서

0

300

1

CSS에서 궁금했던 부분 -실전 페럴렉스 강의 부분

0

492

1

requestAnimationFrame 질문

0

370

1

리뉴얼 이전 강의 파일

0

452

1

코드가 미리보기로 보여주는 확장프로그램이 뭔가요?

0

754

1

수업 파일 부탁드립니다~

0

333

1

배경질문

0

360

1

textWrap의 position을 relative로 주는 것에 대해 질문있습니다!

0

298

1

safari에서 position fixed가 잘 동작하지 않습니다

0

987

1

addEventListener후에 익명함수 실행할때 뒤에 false는 어떤 역할을 하는건가요?

0

566

1

스피드 변수로 scrollTop을 두는 이유가 무엇인가요?

0

373

1

완성파일 어디서 받아볼 수 있나요 ?

0

439

1

완성 파일 요청 드립니다.

0

308

1

사진들이 상단 nav바를 침범하는데 침범 못하게 어떻게해야할까요?

0

157

1

리액트로 하면 어떻게 해야할지 작성해주실수있나요?

0

378

1