먼저 복사하여 실행 효과를 확인하세요. 사용된 핵심은 setInterval() 메서드입니다.
다음과 같이 코드 코드를 복사합니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<머리>
<title>자바스크립트</title>
<스타일>
HTML
{
배경색:은색;
}
.point1
{
위치:절대;
왼쪽:10px;
상단:40px;
}
.point2
{
위치:절대;
왼쪽:100px;
상단:40px;
}
.hr1
{
위치:절대;
상단:60px;
}
</style>
<스크립트 유형="텍스트/자바스크립트">
document.onmousedown = mousedown;
document.onmouseup = mouseup;
var 간격프로세스;
var 직접 = true;
함수 mousedown(){
IntervalProcess = setInterval("MovePoint()", 1);
}
함수 mouseup(){
ClearInterval(간격프로세스);
}
함수 MovePoint(){
(document.getElementById("point1").style){
if (isNaN(parseInt(왼쪽)))
왼쪽 = "10px";
또 다른 {
document.getElementById("point2").style.left = "200px";
if (parseInt(왼쪽) < 0)
직접 = 사실;
if (parseInt(왼쪽) >parseInt(document.getElementById("point2").style.left))
직접 = 거짓;
만약 (직접)
왼쪽 = parsInt(왼쪽) + 1 + "px";
또 다른
왼쪽 = parsInt(왼쪽) - 1 + "px";
}
}
}
</script>
</head>
<본문>
<div id="point1"><font color=blue>a</font></div>
<div id="point2"><font color=red>b</font></div>
<시간 />
</body>
</html>