Advertisement
Guest User

Untitled

a guest
Jul 25th, 2016
56
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.17 KB | None | 0 0
  1. <html>
  2. <head>
  3. <style>
  4. #content {
  5. font-size: 18;
  6. text-align: center;
  7. padding-top: 150px;
  8. }
  9. .blurry-text {
  10. color: transparent;
  11. text-shadow: 0 0 0.5px rgba(0,0,0,0.7);
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <div id="content">
  17. <span id="data" class=""></span>
  18. </div>
  19. </body>
  20.  
  21. <script>
  22. data = ["1", "2", "3", "4", "5", "6", "7", "8"]
  23.  
  24. half_window_size = 1;
  25. data_idx = half_window_size;
  26.  
  27. function updateData() {
  28. data_element = document.getElementById("data");
  29. data_element.innerHTML = "";
  30. for (i = data_idx - half_window_size; i <= data_idx + half_window_size; i++) {
  31. if (i == data_idx) {
  32. data_element.innerHTML += data[i];
  33. } else {
  34. data_element.innerHTML += "<span class=\"blurry-text\">" + data[i] + "</span>";
  35. }
  36. data_element.innerHTML += "<br \\>";
  37. }
  38. }
  39.  
  40. function checkKey(e) {
  41. UP = '38';
  42. DOWN = '40';
  43. e = e || window.event;
  44.  
  45. if (e.keyCode == UP) {
  46. if (data_idx > half_window_size) {
  47. data_idx -= 1;
  48. }
  49. }
  50. else if (e.keyCode == DOWN) {
  51. if (data_idx < data.length - half_window_size - 1) {
  52. data_idx += 1;
  53. }
  54. }
  55.  
  56. updateData();
  57. }
  58.  
  59. document.onkeydown = checkKey;
  60. updateData();
  61. </script>
  62. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement