JavaScript의 스포츠는 종종 웹 사이트에서 사용됩니다. 이번에는 스포츠의 몇 가지 기본 응용 프로그램을 공유하겠습니다. 모든 사람이 개발 중에 직접 사용하는 것이 편리합니다.
이 코드는 간단하고 이해하기 쉽고 초보자에게 적합합니다. 마지막으로, 나는 내 스포츠 프레임 워크를 단계별로 정리할 것입니다.
응용 프로그램 사례 렌더링 :
마우스를 공유하도록 이동하면 왼쪽의 div가 표시됩니다. 혼자서 제거하고 회복하십시오. 나는 모두가 이것을 매우 실용적으로 사용할 것이라고 믿는다. 코드가 어떻게 구현되는지 살펴 보겠습니다.
코드 사본은 다음과 같습니다.
<스타일 유형 = "텍스트/CSS">
#div1 {
너비 : 150px;
높이 : 200px;
배경 : 녹색;
위치 : 절대;
왼쪽 : -150px;
}
#div1 span {
위치 : 절대;
너비 : 20px;
높이 : 60px;
라인 높이 : 20px;
배경 : 파란색;
오른쪽 : -20px;
상단 : 70px;
}
</스타일>
코드 사본은 다음과 같습니다.
<body>
<div id = "div1">
<span>
공유하십시오
</span>
</div>
</body>
다음은 JavaScript 코드입니다
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
Window.onload = function () {
var odiv = document.getElementById ( "div1");
odiv.onmouseover = function () {
StartMove (0);
};
odiv.onmouseout = function () {
StartMove (-150);
};
}
var time = null;
함수 startMove (itraget) {
var odiv = document.getElementById ( "div1");
ClearInterval (시간);
time = setInterval (function () {
var 속도 = 0;
if (odiv.offsetleft> itraget) {
속도 = -10;
}또 다른{
속도 = 10;
}
if (odiv.offsetleft == itraget) {
ClearInterval (시간);
}또 다른{
odiv.style.left = odiv.offsetleft+속도+'px';
}
}, 30);
}
</스크립트>
아이디어 :
스타일의 초기 왼쪽은 -150입니다. DIV가 내부로 줄어들고 0이 주어지면 표시됩니다. 그러면이 값 만 변경하면됩니다.
STARTMOVE의 파라미터 ITARGET은 대상 지점으로, 어떤 대상 지점을 중지할지 나타냅니다.
속도의 크기를 제어하면 운동 속도를 제어 할 수 있습니다. 대상 지점에 도달하면 타이머를 중지하십시오.
법:
* 추정
* 왼쪽 : 30 ITARGET : 300 오른쪽에 긍정적으로 얻습니다.
* 왼쪽 : 600 ITARGET : 50 왼쪽에 음수입니다
*
* 남은 현재 위치와 대상 지점 간의 관계 ITARGET는 양수 및 음수 속도를 유추합니다.
참고 : 공유를 할 때마다 타이머가 켜지므로 시작하자마자 타이머를 꺼야합니다. 더 많이 켜질수록 속도가 빨라질 수 있습니다. 동시에 실행할 여러 타이머가 있기 때문입니다.
따라서 매번 하나의 타이머가 작동하는지 확인해야합니다.
팔로우 : 동일한 함수 함수, 매개 변수가 적을수록 좋습니다. 위의 규칙에 따라 속도는 매개 변수로 전달되지 않습니다.
인생의 모범을 보이기 위해 : 일반적으로 택시를 타고 택시 운전사에게 그가 도달 한 곳마다 100 야드가 있다고 말하는 것은 불가능합니다. 당신은 마스터에게 얼마나 빨리 달리고 싶어하는지 말할 수 없습니다.
따라서 프로그램은 동일하므로 속도 매개 변수가 여기에서 제거됩니다.
물론, 현재 스포츠 프레임 워크에는 많은 문제가있을 것이며, 앞으로도 서로 해결 될 것입니다. 다음 기사에서는 균일 한 움직임을 중지하는 방법에 대해 논의 해 봅시다.