1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>JavaScript</title> 5 <style> 6 html 7 { 8 background-color:silver; 9 } 10 .point1 11 { 12 position:absolute; 13 left:10px; 14 top:40px; 15 16 } 17 .point2 18 { 19 position:absolute; 20 left:100px; 21 top:40px; 22 } 23 .hr1 24 { 25 position:absolute; 26 top:60px; 27 } 28 </style> 29 <script type="text/JavaScript"> 30 document.onmousedown = mousedown; 31 document.onmouseup = mouseup; 32 var intervalProcess; 33 var direct = true; 34 function mousedown(){ 35 intervalProcess = setInterval("MovePoint()", 1); 36 } 37 function mouseup(){ 38 clearInterval(intervalProcess); 39 } 40 function MovePoint(){ 41 with (document.getElementById("point1").style){ 42 if (isNaN(parseInt(left))) 43 left = "10px"; 44 else { 45 document.getElementById("point2").style.left = "200px"; 46 if (parseInt(left) < 0) 47 direct = true; 48 if (parseInt(left) > parseInt(document.getElementById("point2").style.left)) 49 direct = false; 50 if (direct) 51 left = parseInt(left) + 1 + "px"; 52 else 53 left = parseInt(left) - 1 + "px"; 54 } 55 } 56 } 57 </script> 58 </head> 59 <body> 60 <div class="point1" id="point1"><font color=blue>a</font></div> 61 <div class="point2" id="point2"><font color=red>b</font></div> 62 <hr class="hr1" /> 63 </body> 64 </html
