Kopieren Sie es zuerst und sehen Sie sich den laufenden Effekt an. Die verwendete Methode ist setInterval():
Kopieren Sie den Codecode wie folgt:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<Kopf>
<title>JavaScript</title>
<Stil>
html
{
Hintergrundfarbe:Silber;
}
.Punkt1
{
Position:absolut;
links:10px;
oben:40px;
}
.Punkt2
{
Position:absolut;
links:100px;
oben:40px;
}
.hr1
{
Position:absolut;
oben:60px;
}
</style>
<script type="text/JavaScript">
document.onmousedown = Mousedown;
document.onmouseup = Mouseup;
var IntervalProcess;
var direkt = wahr;
Funktion Mousedown(){
IntervalProcess = setInterval("MovePoint()", 1);
}
Funktion Mouseup(){
clearInterval(intervalProcess);
}
Funktion MovePoint(){
mit (document.getElementById("point1").style){
if (isNaN(parseInt(left)))
links = "10px";
anders {
document.getElementById("point2").style.left = "200px";
if (parseInt(left) < 0)
direkt = wahr;
if (parseInt(left) > parseInt(document.getElementById("point2").style.left))
direkt = falsch;
wenn (direkt)
left = parseInt(left) + 1 + "px";
anders
left = parseInt(left) - 1 + "px";
}
}
}
</script>
</head>
<Körper>
<div id="point1"><font color=blue>a</font></div>
<div id="point2"><font color=red>b</font></div>
<hr />
</body>
</html>