div id box style position absolute top 100px background efe width 100p

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<div id="box" style="position: absolute; top: 100px; background: #efe; width: 100px; height: 100px">
basket Ball
</div>
<script type="text/javascript">
Math.ease = function(t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t + b;
return - c / 2 * (--t * (t - 2) - 1) + b;
};
Math.rand = function(x, y) {
return (Math.round(Math.random() * (y - x)) + x);
}
basketBall = function(fps, f) {
this.fps = fps,
this.frames = f;
};
basketBall.timers = [];
basketBall.run = function() {
var o = this;
o.timer || (o.timer = setInterval(function() {
for (var h, d = +(new Date), t = basketBall.timers, i = t.length; i--;) { (!t[i].running || ((d - t[i].time) / (1e3 / t[i].fps) > t[i].current + 1 && t[i].onframe(++t[i].current), t[i].current >= t[i].frames)) && (h = t.splice(i, 1)[0], h.stop(1));
}
},
1));
};
basketBall.prototype.start = function(c) {
var o = this,
t = basketBall;
if (o.running) return;
o.running = true,
o.current = c || 0;
o.time = new Date,
o.onstart && o.onstart();
if (!o.onframe || o.frames <= 0 || o.fps <= 0) return o.stop(1);
t.timers.push(this),
t.run();
};
basketBall.prototype.stop = function() {
var o = this;
o.running = false;
if (!basketBall.timers.length) basketBall.timer = clearInterval(basketBall.timer),
null;
arguments.length && o.onstop && o.onstop();
return o;
};
var ball = new basketBall(30, 50),
d = document,
b = d.getElementById("box"),
i = 600,
n = 0;
ball.onframe = function() {
b.style.left = Math.ease(this.current, 0, i, 30) + "px";
};
ball.onstop = function() {
if ((i -= (Math.rand(i / 10, i / 3) + (++n * 2))) > 4) {
this.fps += n;
this.start();
}
};
ball.start();
</script>