function mousefunc 관련 질문이요!
142
작성한 질문수 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>test</title>
<style>
body{
background-color:black;
}
h1{
color:#fff;
}
.cusor_Item{
position:absolute;
width:100px;
height:100px;
background-color:red;
}
</style>
<script>
window.onload=function(){
let h1 = document.getElementsByTagName("h1")[0];
let cusor_item=document.getElementsByClassName("cusor_item")[0];
window.addEventListener("mousemove",mousefunc,false);
function mousefunc(e){
h1.innerHTML="x: "+e.clientX+"y: "+e.clientY;
cusor_item.style.transform = "translate("+e.clientX+"px,"+e.clientY+"px")";
//console.log(e.clientX, e.clientY);
}
}
</script>
</head>
<body>
<h1>test</h1>
<div class="cusor_Item"></div>
</body>
</html>
선생님 말씀해주신대로 써보니까 자꾸 window.onload function {} 이 부분이랑 function mousefunc(e){} 이 부분 태그가 혼동되는 일이 생깁니다 ㅠㅠ 왜그럴까요..? 그리고 저 빨간 부분이 왜 안움직이는 걸까요??
답변 1
0
안녕하세요 오타가 있네요.
let cusor_item=document.getElementsByClassName("cusor_Item")[0]; //대소문자
cusor_item.style.transform = "translate("+e.clientX+"px,"+e.clientY+"px)"; //"px")"
두가지 바꾸시면 잘 되실거에요~
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
301
1
CSS에서 궁금했던 부분 -실전 페럴렉스 강의 부분
0
492
1
requestAnimationFrame 질문
0
371
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
374
1
완성파일 어디서 받아볼 수 있나요 ?
0
439
1
완성 파일 요청 드립니다.
0
308
1
사진들이 상단 nav바를 침범하는데 침범 못하게 어떻게해야할까요?
0
157
1
리액트로 하면 어떻게 해야할지 작성해주실수있나요?
0
378
1