まずそれをコピーして、実行中の効果を確認します。使用される本質は setInterval() メソッドです。
次のようにコードをコピーします。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<頭>
<title>JavaScript</title>
<スタイル>
html
{
背景色:シルバー;
}
.point1
{
位置:絶対;
左:10ピクセル;
上:40ピクセル;
}
.point2
{
位置:絶対;
左:100ピクセル;
上:40ピクセル;
}
.hr1
{
位置:絶対;
上:60ピクセル;
}
</スタイル>
<script type="text/JavaScript">
document.onmousedown = マウスダウン;
document.onmouseup = マウスアップ;
var 間隔プロセス;
var direct = true;
関数マウスダウン(){
IntervalProcess = setInterval("MovePoint()", 1);
}
関数mouseup(){
clearInterval(間隔プロセス);
}
関数 MovePoint(){
with (document.getElementById("point1").style){
if (isNaN(parseInt(left)))
左 = "10ピクセル";
それ以外 {
document.getElementById("point2").style.left = "200px";
if (parseInt(left) < 0)
直接 = 真;
if (parseInt(left) > parseInt(document.getElementById("point2").style.left))
直接 = false;
もし（直接）
left = parseInt(left) + 1 + "px";
それ以外
left = parseInt(left) - 1 + "px";
}
}
}
</script>
</head>
<本文>
<div id="point1"><font color=blue>a</font></div>
<div id="point2"><font color=red>b</font></div>
<hr />
</body>
</html>