First, copy it and check the running effect. The essence of the operation is the setInterval () method:
Copy codeThe Code is as follows:
<! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Title> JavaScript </title>
<Style>
Html
{
Background-color: silver;
}
. Point1
{
Position: absolute;
Left: 10px;
Top: 40px;
}
. Point2
{
Position: absolute;
Left: 100px;
Top: 40px;
}
. Hr1
{
Position: absolute;
Top: 60px;
}
</Style>
<Script type = "text/JavaScript">
Document. onmousedown = mousedown;
Document. onmouseup = mouseup;
Var intervalProcess;
Var direct = true;
Function mousedown (){
IntervalProcess = setInterval ("MovePoint ()", 1 );
}
Function mouseup (){
ClearInterval (intervalProcess );
}
Function MovePoint (){
With (document. getElementById ("point1"). style ){
If (isNaN (parseInt (left )))
Left = "10px ";
Else {
Document. getElementById ("point2"). style. left = "200px ";
If (parseInt (left) <0)
Direct = true;
If (parseInt (left)> parseInt (document. getElementById ("point2"). style. left ))
Direct = false;
If (direct)
Left = parseInt (left) + 1 + "px ";
Else
Left = parseInt (left)-1 + "px ";
}
}
}
</Script>
</Head>
<Body>
<Div class = "point1" id = "point1"> <font color = blue> a </font> </div>
<Div class = "point2" id = "point2"> <font color = red> B </font> </div>
<Hr class = "hr1"/>
</Body>
</Html>