1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style type="text/css"> 7 body{ 8 margin: 0; 9 padding: 0; 10 } 11 div{ 12 50px; 13 height: 50px; 14 border-radius: 50%; 15 background: yellow; 16 position: absolute; 17 } 18 #div1{ 19 background: yellowgreen; 20 } 21 #div2{ 22 background: greenyellow; 23 } 24 </style> 25 </head> 26 <script type="text/javascript"> 27 window.onload = function (){ 28 //定义起点 29 var [originX,originY] = [300,200]; 30 div0.style.left = div1.style.left = originX+"px"; 31 div0.style.top = div1.style.top = originY+"px"; 32 //定义终点 33 var [endX,endY] = [500,200]; 34 div1.style.left = endX+"px"; 35 div1.style.top = endY+"px"; 36 var x,y,a,c,b;//定义我们所需要的变量。 37 x =endX - originX ;//x代表x轴的距离； 38 y =endY - originY;//y代表y轴的距离； 39 a = -0.02; //随意定义一个数； 40 c = 0; //因为存在（0，c）点； 41 b = (y- a*x*x-c)/x; 42 x = 1; 43 var step = (x>0)? 1:-1;//由于x =endX - originX 可能是负值； 44 var timer = setInterval(function(){ 45 x += step; 46 y = a*x*x+b*x+c; 47 div2.style.left =originX+x+"px"; 48 div2.style.top = originY+y +"px"; 49 if(originX+x==endX){ 50 clearInterval(timer); 51 } 52 },30); 53 54 } 55 </script> 56 <body> 57 <div id="div0"></div> 58 <div id="div1"></div> 59 <div id="div2"></div> 60 </body> 61 </html>