마우스를따라움직이는 원 스크립트 전체적으로 이해가안갑니다
본문
전체적으로 이래가안되서 한줄씩 설명좀 부탁드립니다
다그리고. 이전도 스크립트짜는 수준이면 어느정도 수준인지도 알고싶습니다
<script> // follow_mouse js
var $ =document.querySelector.bind(document);
var $on = document.addEventListener.bind(document);
var xmouse, ymouse;
$on('mousemove',function(e){
xmouse =e.clientX || e.pageX;
ymouse =e.clientY || e.pageY;
});
var ball = $('#ball');
var x = void 0,
y = void 0,
dx = void 0,
dy = void 0,
tx = 0,
ty = 0,
key = -1;
var followMouse = function followMouse(){
key = requestAnimationFrame(followMouse);
if(!x || !y){
x = xmouse;
y = ymouse;
}else{
dx = (xmouse - x) * 0.125;
dy = (ymouse - y) * 0.125;
if(Math.abs(dx) + Math.abs(dy) < 0.1){
x = xmouse;
y = ymouse;
}else{
x +=dx;
y +=dy;
}
}
ball.style.left = x +'px';
ball.style.top = y +'px';
}
</script>
답변 1
mousemove 이벤트에서 마우스 좌표 변화량을 받아서
id="ball" 항목의 좌표에 반영해주는 코드네요.
어느정도 수준인지는 어떻게 뭐라고 설명해야 할까요 ?
학습량이 궁금하신겁니까? 수준 평가가 하고싶은걸까요?
답변은 감사드립니다 근데 제가알고싶은 dx는 뭐고 key는왜 -1이며 math.abs는 뭔가 이런것등이 알고싶은거엿습니다 그리고 저정도면 중급이상은 될거같은데 저만의 차각인지도 알고싶두요
