Copie-o primeiro e veja o efeito de execução. A essência usada é o método setInterval():
Copie o código do código da seguinte forma:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<cabeça>
<título>JavaScript</título>
<estilo>
HTML
{
cor de fundo:prata;
}
.ponto1
{
posição:absoluta;
esquerda:10px;
topo:40px;
}
.ponto2
{
posição:absoluta;
esquerda:100px;
topo:40px;
}
.hr1
{
posição:absoluta;
topo:60px;
}
</estilo>
<script type="texto/JavaScript">
document.onmousedown = mousedown;
document.onmouseup = mouseup;
var intervaloProcess;
var direto = verdadeiro;
função mouse para baixo(){
intervalProcess = setInterval("MovePoint()", 1);
}
função mouseup(){
clearInterval(intervalProcess);
}
função MovePoint(){
com (document.getElementById("ponto1").style){
if (isNaN(parseInt(esquerda)))
esquerda = "10px";
outro {
document.getElementById("ponto2").style.left = "200px";
if (parseInt(esquerda) < 0)
direto = verdadeiro;
if (parseInt(esquerda) > parseInt(document.getElementById("ponto2").style.esquerda))
direto = falso;
se (direto)
esquerda = parseInt(esquerda) + 1 + "px";
outro
esquerda = parseInt(esquerda) - 1 + "px";
}
}
}
</script>
</head>
<corpo>
<div id="point1"><font color=blue>a</font></div>
<div id="point2"><font color=red>b</font></div>
<hr />
</body>
</html>