inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

질문있습니다

217

bigkid young

작성한 질문수 7

0

1.window.onload = function() {

 2. let h1 = document.getElementsByTagName("h1")[0]

 2.let cursor_item = document.getElementsByClassName("cursor_item")[0]

3.window.addEventListener("mouseover", mouseFunc, false);

4.function mouseFunc(e) {

  5.h1.innerHTML = " x: "+  e.clientX  + " y :" + e.clientY;

  6.cursor_item.style.transform = "translate("+e.clientX + "px," + e.clientY + "px)";

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

  }

}

이었을 때 

1.윈도우가 나타났을때 어떠한 동작을 해라

2.동작을 할 애들을 불러주려고 데이터값을 할당해주고

3.윈도우 안에서 마우스를 움직일 시 mouseFunc를  어떻게 동작하게 해라

4.function mouseFunc(e)로 임의로 이름을 설정해서 매개

변수로 만들고  동작하게할 애들 할당된 데이터 h1과 커서를 

이렇게 해라

5.

6.

7.단순히 잘 되는지 안되는지 콘솔창을 통해 체크

1 ~ 4번대로 제가 나름 해석했는데 이런 알고리즘으로 

해석해도 되나요?

그리고 5 ~ 6은 어떻게 해석해야하나요..?

인터랙티브-웹 javascript

답변 3

0

코딩일레븐

네 대략 맞습니다.

1.화면이 로드 되었다 (이제 오브젝트를 사용할 수 있는 준비가 되었다)

2.동작을 할 애들을 각각 변수에 할당

3.윈도우 안에서 마우스를 움직일 시 mouseFunc를  실행

4.function mouseFunc(e) <- 함수명은 임의로. e는 마우스 클릭 및 마우스 무브의 값

console.log(e)를 찍어서 확인해보세요.

0

bigkid young

5~ 7는 이해했습니다 

제가 이해한 1~4 까지과정은 저렇개 해석해도 상관없는것이지요??

0

코딩일레븐

  5.h1.innerHTML = " x: "+  e.clientX  + " y :" + e.clientY; <- h1에 좌표 숫자로 표시. innerText 로 해도 됩니다.

  6.cursor_item.style.transform = "translate("+e.clientX + "px," + e.clientY + "px)"; <- cursor_item 의 style중 transform 속성을 변화시켜주는 겁니다. 마우스 위치값으로. 

  7.console.log(e.clientX, e.clientY); <- f12 눌러서 개발자 도구에서 확인

mouse position interpolation과 transition linear interpolation의 차이

0

72

1

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

0

180

2

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

0

147

2

go live 실시간 크롬

0

320

1

javascript 도움말 vsCode 확장팩 문의!

0

362

1

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

0

356

1

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

0

338

1

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

0

397

1

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

0

344

1

perspective에 대해서

0

285

1

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

0

480

1

requestAnimationFrame 질문

0

362

1

리뉴얼 이전 강의 파일

0

441

1

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

0

747

1

수업 파일 부탁드립니다~

0

323

1

배경질문

0

353

1

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

0

289

1

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

0

981

1

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

0

555

1

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

0

363

1

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

0

432

1

완성 파일 요청 드립니다.

0

301

1

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

0

152

1

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

0

365

1