运动的球(1) 

 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>
View Code

 

posted on 2015-11-28 16:59  风吹树叶黄  阅读(145)  评论(0)    收藏  举报

导航