inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

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

마우스를 따라오지 않아요 ㅠㅠ

145

강치약씨

작성한 질문수 3

0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background: #000;
        }
        h1{
            color: #fff;
        }
        .box{position: absolute; background: red; top: 100px; left: 0; width: 100px; height: 100px;}
    </style>
</head>
<body>
    <script>
        window.onload = () => {
            let h1 = document.getElementById("h1")
            let boxx = document.getElementsByClassName("box")
            window.addEventListener('mousemove', mouseFunc, false)
    
            function mouseFunc(e) {
                h1.innerHTML=`X : ${e.clientX}, Y : ${e.clientY}`
                boxx.style.transform =`translate(${e.clientX}px, ${e.clientY}px)`
            }
        }
    </script>
    <h1 id="h1">test</h1>
    <div class="box"></div>
</body>

</html>

인터랙티브-웹 javascript

답변 1

0

코딩일레븐

안녕하세요

맨뒤에 [0]을 붙여주셔야합니다.

.box라는 클래스네임을 가진 녀석들 중 첫번째 라는 의미입니다.

let boxx = document.getElementsByClassName("box")[0];

강의에는 안 나오지만 아래의 두가지 방법으로 해도 됩니다.

let boxx = document.querySelectorAll(".box")[0];
let boxx = document.querySelector(".box");

mouse position interpolation과 transition linear interpolation의 차이

0

74

1

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

0

182

2

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

0

149

2

go live 실시간 크롬

0

324

1

javascript 도움말 vsCode 확장팩 문의!

0

365

1

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

0

359

1

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

0

340

1

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

0

399

1

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

0

347

1

perspective에 대해서

0

286

1

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

0

482

1

requestAnimationFrame 질문

0

364

1

리뉴얼 이전 강의 파일

0

443

1

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

0

748

1

수업 파일 부탁드립니다~

0

326

1

배경질문

0

355

1

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

0

290

1

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

0

984

1

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

0

557

1

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

0

365

1

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

0

435

1

완성 파일 요청 드립니다.

0

305

1

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

0

155

1

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

0

369

1