-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path定点抛物线运动.html
96 lines (86 loc) · 1.89 KB
/
定点抛物线运动.html
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
html,
body,
div {
margin: 0;
padding: 0;
}
div{
position: absolute;
width: 20px;
height: 20px;
background-color: blue;
}
div.top {
right:200px;
top:150px;
background-color: green;
}
div.end {
right:100px;
top:250px;
background-color: #c33;
}
div.move {
left: 100px;
top: 400px;
}
</style>
</head>
<body>
<div class="top">(right:200,top:150)</div>
<div class="end">(right:100,top:250)</div>
<div class="move"></div>
<script type="text/javascript">
'use strict';
window.onload = function(){
var div = document.querySelector('.move');
//元素的位置
var clientW = document.documentElement.clientWidth;
document.onclick = function(e){
e = e || window.event;
var x = -(clientW - e.clientX - 200),
y = -(e.clientY-150);
//求抛物线的a值
// y = ax*x + b*x;
// -100 = 10000a + 100b;
// y = a*x*x + b*x //*(100/x)
//y+100 = (x*x*-10000)*a;
var a = (100*y/x+100)/(100*x-10000),
b = (-100 - 10000*a)/100;
a = a.toFixed(4);
b = b.toFixed(4);
//自己的相对位置（出发点是(0,0)）
var l = x,
t = y;
//开启定时器
var timer = setInterval(function(){
//x轴方向运动
l += 10;
//根据x获取y
t = a * l * l + b * l;
//临界条件（当x>重点横坐标）
if(l >= 100){
l = 100;
t = -100;
clearInterval(timer);
}
div.style.left = clientW + l - 200 - 20 + 'px';
div.style.top = 150 - t + 'px';
},13);
}
}
function css(elem,style){
if(window.getComputedStyle){
return window.getComputedStyle(elem)[style];
}
return elem.currentStyle[style];
}
</script>
</body>
</html>