1 <!doctype html>
2 <html>
3 <head>
4 <title>抛物运动</title>
5 <style>
6 html{height:100%;}
7 body{font-family:Arial;height:100%;}
8 .wrap{width:1200px;margin:0 auto;padding:60px 0;position:relative;height:100%;}
9 .x{border-top:1px solid #000;position:absolute;left:0;top:400px;right:0;}
10 .x:before{content:"X";font-size:40px;position:absolute;right:5px;}
11 .y{border-left:1px solid #000;position:absolute;left:600px;top:0;bottom:0;}
12 .y:before{content:"Y";font-size:40px;position:absolute;left:5px;}
13 #target{width:100px;height:40px;border-radius:20px;cursor:move;background:#f0f3f9;border:1px solid #3453d8;position:absolute;top:100px;left:100px;line-height:40px;}
14 .mid{display:block;text-align:center;}
15 #roll{width:30px;height:30px;border-radius:50%;position:absolute;top:400px;left:600px;margin-top:-15px;margin-left:-15px;background:#f2c823;}
16 </style>
17 </head>
18 <body>
19 <div class="wrap">
20 <i class="x"></i>
21 <i class="y"></i>
22 <div id="target"><span class="mid">X:<span id="xt"></span> Y:<span id="yt"></span></span></div>
23 <div id="roll"></div>
24 </div>
25 <script>
26 target.addEventListener("mousedown",dragstart, false);
27 var orignX, orignY, startX, startY, targetX, targetY;
28 xt.innerHTML = target.offsetLeft - 600 + 50;
29 yt.innerHTML = target.offsetTop - 400 + 20;
30 function dragstart(e){
31 orignX = e.clientX;
32 orignY = e.clientY;
33 startX = this.offsetLeft;
34 startY = this.offsetTop;
35 this.addEventListener("mousemove",drag, false);
36 this.addEventListener("mouseup",dragend, false);
37 }
38 function drag(e){
39 var x = e.clientX, y = e.clientY, deltaX = e.clientX - orignX, deltaY = e.clientY - orignY;
40 this.style.left = startX + deltaX + 'px';
41 this.style.top = startY + deltaY + 'px';
42 xt.innerHTML = this.offsetLeft - 600 + 50;
43 yt.innerHTML = this.offsetTop - 400 + 20;
44 }
45 function dragend(){
46 this.removeEventListener("mousemove", drag, false);
47 this.removeEventListener("mouseup", dragend, false);
48 targetX = target.offsetLeft - 600 + 50;
49 targetY = target.offsetTop - 400 + 20;
50 b = (targetY - a * targetX * targetX) / targetX;
51 shot();
52 }
53 var frame1 = 167, a = 0.003, flag = true, b;
54 function shot(){
55 if(!flag) return;
56 var moveX = 0, rate = targetX > 0 ? 1 : -1;
57 var step = function(){
58 var t = 2 * a * moveX + b;
59 moveX = moveX + rate * Math.sqrt(frame1 / (t * t + 1));
60
61 if(Math.abs(moveX) > Math.abs(targetX)){
62 moveX = targetX;
63 }
64 var x1 = moveX, y1 = a * x1 * x1 + b * x1;
65 roll.style["transform"] = "translate(" +x1 + "px, "+ y1 +"px"+")";
66 if(x1 !== targetX){
67 window.requestAnimationFrame(step);
68 }else{
69 var xx = 10;
70 }
71 };
72 window.requestAnimationFrame(step);
73 }
74 </script>
75 </body>
76 </html>
