Javascript가 균일한 Motion_javascript 기술을 달성하는 방법에 대한 간략한 토론

Javascript로 된 스포츠는 웹사이트에서 자주 사용됩니다. 이번에는 모션의 몇 가지 기본 응용 프로그램을 여러분과 공유하고 싶습니다. 개발 중에 누구나 직접 사용할 수 있어 편리합니다.

코드가 간단하고 이해하기 쉬워 초보자에게 적합합니다. 마지막으로 나만의 동작 프레임워크를 단계별로 정리하겠습니다.

적용 사례 렌더링:

공유 항목에 마우스를 올리면 왼쪽에 div가 표시됩니다. 제거하면 자동으로 복원됩니다. 모두가 이것을 사용할 것이라고 믿습니다. 코드가 어떻게 구현되는지 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다. #div1 { 너비: 150px; > > 높이 : 200px; 배경: 녹색; 위치: 절대; 왼쪽: -150px; } #div1 범위 { 위치: 절대; 너비: 20px; 높이: 60px; 줄 높이: 20px; 배경: 파란색; 오른쪽: -20px; 상단: 70px; } >

코드 복사 코드는 다음과 같습니다. ~ 에 공유 ~ >

다음은 Javascript 코드입니다

코드 복사

코드는 다음과 같습니다. window.onload=function(){ var oDiv=document.getElementById("div1"); oDiv.onmouseover=function(){ startMove(0); }; oDiv.onmouseout=function(){ startMove(-150); }; } var 시간=null; 함수 startMove(iTraget){ var oDiv=document.getElementById("div1"); ClearInterval(시간); 시간=setInterval(함수(){ var 속도=0; if(oDiv.offsetLeft>iTraget){ 속도=-10; }그밖에{ 속도=10; } if(oDiv.offsetLeft==iTraget){ ClearInterval(시간); }그밖에{ oDiv.style.left=oDiv.offset왼쪽 속도 'px'; } },30); } 사물:

스타일의 초기 왼쪽이 -150이므로 div가 안쪽으로 줄어들고, 0이면 표시됩니다. 그런 다음 이 값을 변경하면 됩니다

startMove의 iTarget 매개변수는 목표 지점으로, 정지할 목표 지점을 나타냅니다.

속도의 크기를 조절해 이동 속도를 조절하세요. 목표 지점에 도달하면 타이머를 중지합니다.

규칙:

* 가정

* 왼쪽:30 iTarget:300 오른쪽으로 가는 것이 긍정적인 것으로 나타났습니다 * left:600 iTarget:50 왼쪽으로 가는 것이 음수임이 밝혀졌습니다 * * 왼쪽 현재 위치와 목표점 iTarget의 관계를 통해 양의 속도와 음의 속도를 유추합니다

참고: 공유하기 위해 이동할 때마다 타이머가 켜지기 때문에 처음에는 타이머를 꺼야 합니다. 여러 개의 타이머가 동시에 실행되므로 타이머를 많이 켜면 속도가 빨라집니다.

그러므로 매번 타이머가 작동하는지 확인하세요.

원칙을 따르십시오. 함수 기능은 동일하고 매개변수가 적을수록 좋습니다. 따라서 위 규칙에 따라 속도는 매개변수로 전달되지 않습니다.

인생의 예를 들자면, 택시를 탈 때 일반적으로 100야드 속도로 택시 운전사에게 어디로 가고 있는지 말하는 것은 불가능합니다. 택시를 탈 때 운전기사에게 얼마나 빨리 가고 싶은지 말할 수 없습니다

그래서 프로그램은 동일합니다. 여기서는 속도 매개변수가 제거되었습니다.

물론 현재의 스포츠 체계에는 여전히 많은 문제점이 남아 있으며 이는 앞으로 해결될 것입니다. 다음 글에서는 등속운동을 멈추는 방법에 대해 알아보겠습니다.