-
Notifications
You must be signed in to change notification settings - Fork 6
/
demo.html
121 lines (97 loc) · 3.84 KB
/
demo.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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
div { display: inline-block;}
</style>
<body>
<div data-parent-alo="default">
<div id="appones" data-proportion-h="1" style="width:120px; background:#333;"></div>
<div id="appone" data-proportion-w="2" style="height:120px; background:#333;"></div>
<div data-proportion-targer-h="1" data-proportion-target="appone" style="width:120px; background:#333;"></div>
<div data-proportion-targer-w="1" data-proportion-target="appone" style="height:120px; background:#333;"></div>
</div>
<div style="widht:100%; display:block;">
<div data-proportion-h="1" style="width:30%; background:#333;"></div>
<div data-proportion-h="1" style="width:30%; background:#333;"></div>
<div data-proportion-h="1" style="width:30%; background:#333;"></div>
</div>
<div id="sT" style="height: 200px"></div>
<div style="width: 20px; background-color: aqua" data-proportion-targer-oh="1" data-proportion-target-oh="sT" data-proportion-targer-ow="1" data-proportion-target-ow="appones"></div>
<div id="my" style="width: 20px; background-color: aqua"></div>
<script src="stickjaw.js"></script>
<script>
/*var SJ_init = {
options: {
hlw: true,
wlh: true,
hlt: true,
wlt: true,
alo: true,
},
settings: {
windowResize: true
}
}*/
var SJ_init = {
options: {
hlw: true,
wlh: true,
hlt: true,
wlt: true,
alo: true,
ohlt: true,
owlt: true
},
settings: {
windowResize: true,
writeHystory: true
}
}
var e = new SJ(SJ_init);
SJ.loop([
{
method: 'hlw',
currentTarget: 'my',
proportion: 2,
target: null
},
{
method: 'wlh',
currentTarget: 'sT',
proportion: 2,
target: null
},
{
method: 'hlt',
currentTarget: 'sT',
proportion: 2,
target: 'appone'
},
{
method: 'wlt',
currentTarget: 'sT',
proportion: 2,
target: 'appone'
}
]);
function progress(prop){
SJ.loop([{method: 'hlw',
currentTarget: 'my',
proportion: prop,
target: null}]);
}
var prop = 0.01;
window.addEventListener('load', function(){
setInterval(function(){
if(prop <= 2){
progress(prop);
prop = prop + 0.01;
}
}, 1, prop);
}, false);
</script>
</body>
</html>