-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
51 lines (43 loc) · 1.25 KB
/
index.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
<!doctype HTML>
<html>
<head>
<title>Slide panel demo</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
<script type="text/javascript" src="slidePanel.js"></script>
<script type="text/javascript">
'use strict';
window.addEventListener('load', function() {
var container = document.getElementById('container');
var slidePanel = new SlidePanel(container);
for (var ii = 1; ii <= 99; ++ii) {
var page = document.createElement('div');
var count = document.createElement('span');
var hue = Math.round((Math.random()) * 360);
var complement = (hue + 180) % 360;
page.style.backgroundColor = 'hsl(' + hue + ',100%, 80%)';
count.style.backgroundColor = 'hsl(' + complement + ',100%, 20%)';
count.innerHTML = ii;
page.appendChild(count);
slidePanel.add(page);
}
slidePanel.reposition();
//
// Add keyboard controls
//
document.addEventListener('keydown', function(e) {
if (e.keyCode === 39) {
slidePanel.next();
e.preventDefault();
};
if (e.keyCode === 37) {
slidePanel.back();
e.preventDefault();
};
});
});
</script>
</head>
<body>
<div id="container"></div>
</body>
<html>