Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <style>
- #content {
- font-size: 18;
- text-align: center;
- padding-top: 150px;
- }
- .blurry-text {
- color: transparent;
- text-shadow: 0 0 0.5px rgba(0,0,0,0.7);
- }
- </style>
- </head>
- <body>
- <div id="content">
- <span id="data" class=""></span>
- </div>
- </body>
- <script>
- data = ["1", "2", "3", "4", "5", "6", "7", "8"]
- half_window_size = 1;
- data_idx = half_window_size;
- function updateData() {
- data_element = document.getElementById("data");
- data_element.innerHTML = "";
- for (i = data_idx - half_window_size; i <= data_idx + half_window_size; i++) {
- if (i == data_idx) {
- data_element.innerHTML += data[i];
- } else {
- data_element.innerHTML += "<span class=\"blurry-text\">" + data[i] + "</span>";
- }
- data_element.innerHTML += "<br \\>";
- }
- }
- function checkKey(e) {
- UP = '38';
- DOWN = '40';
- e = e || window.event;
- if (e.keyCode == UP) {
- if (data_idx > half_window_size) {
- data_idx -= 1;
- }
- }
- else if (e.keyCode == DOWN) {
- if (data_idx < data.length - half_window_size - 1) {
- data_idx += 1;
- }
- }
- updateData();
- }
- document.onkeydown = checkKey;
- updateData();
- </script>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement