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 width: 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>
浙公网安备 33010602011771号