효과:
아이디어:
운동을 수행하려면 setInerval() 타이머를 사용하세요. 그러다가 마침내 멈추었을 때 그 공백을 메우도록 판단을 내리는 것이 핵심이다.
암호:
다음과 같이 코드 코드를 복사합니다.
<head runat="서버">
<제목></제목>
<스타일 유형="텍스트/css">
#div1
{
너비: 100px;
높이: 100px;
배경: #0000FF;
위치: 절대;
왼쪽: 800px;
상단: 100px;
}
#div200
{
너비: 1px;
높이: 400px;
배경: #FF0000;
위치: 절대;
왼쪽: 200px;
}
#div500
{
너비: 1px;
높이: 400px;
배경: #FF0000;
위치: 절대;
왼쪽: 500px;
}
</style>
<스크립트 유형="텍스트/자바스크립트">
함수 이동(끝) {
var oDiv = document.getElementById('div1');
var 타이머 = null;
타이머 = setInterval(함수 () {
var speed = (end - oDiv.offsetLeft) / 5 //끝점과 offsetLeft를 기준으로 이동 속도를 구합니다.
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //반올림하면 소수점 자리는 정수가 됩니다.
// if (oDiv.offsetLeft <= end) {
// 클리어 인터발(타이머);
// }
// 또 다른 {
// oDiv.style.left = oDiv.offsetLeft + 속도 + 'px';
// }
if (Math.abs(end - oDiv.offsetLeft) <= speed) { //멈추면 끝 부분에 약간의 틈이 생기거나, 지정된 위치에 완전히 도달하지 못하므로 속도보다 낮아야 합니다.
clearInterval(timer); //거리가 속도보다 적으면 타이머를 정지한다.
oDiv.style.left = end + 'px'; //정지 후 공백을 채웁니다.
}
또 다른 {
oDiv.style.left = oDiv.offsetLeft + 속도 + 'px' //DIV 이동;
}
}, 30)
}
</script>
</head>
<본문>
<input type="button" id="btn1" value="500 위치로" onclick="move(500) />
<input type="button" id="btn2" value="200 위치로" onclick="move(200) />
<div 아이디="div1">
</div>
<div id="div200">200
</div>
<div id="div500">500
</div>
</body>