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{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{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{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>