| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| body { |
| background-color: rgb(255, 255, 255); |
| font-weight: bold; |
| font-size: 30px; |
| } |
| #container { |
| position: absolute; |
| left: 200px; |
| top: 200px; |
| } |
| .selectable { |
| position: absolute; |
| left: 0; |
| top: 0; |
| opacity: 0; |
| transition: opacity 1.5s; |
| } |
| |
| /* Styles used by the first slide */ |
| .transform-test-div { |
| transform: translateY(100px) translateX(100px); |
| background-color: rgb(160, 160, 255); |
| font-size: 20px; |
| width: 100px; |
| height: 100px; |
| } |
| |
| /* Styles used by the second slide */ |
| .level-1 { |
| font-size: 100px; |
| background-color: #40c4ff; |
| } |
| .level-2 { |
| background-color: #00b0ff; |
| } |
| .level-3 { |
| background-color: #0091ea; |
| } |
| |
| /* Styles used by the third slide */ |
| #opacity-test-root { |
| width: 400px; |
| height: 400px; |
| background-color: rgb(255, 0, 0); |
| opacity: 1; |
| font-size: 16px; |
| } |
| |
| .opacity-test-div { |
| font-size: 2em; |
| width: 2.5em; |
| height: 2.5em; |
| background-color: rgb(0, 0, 255); |
| opacity: 0.5; |
| } |
| </style> |
| </head> |
| |
| <body> |
| <div id="container"> |
| <div class="selectable"> |
| <div class="transform-test-div"> |
| <div class = "transform-test-div"> |
| </div> |
| </div> |
| </div> |
| |
| <div class="selectable"> |
| <span class="level-1"> |
| I |
| <span class="level-2"> |
| II |
| <div class="level-3">III</div> |
| II |
| </span> |
| I |
| </span> |
| </div> |
| |
| <div class="selectable"> |
| <div id="opacity-test-root"> |
| <div class="opacity-test-div"> |
| <div class="opacity-test-div"> |
| <div class="opacity-test-div"> |
| Hello? |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <script> |
| var selected_index = 1; |
| var selectables = null; |
| |
| function Refresh() { |
| // Hide everything except for the selected div. |
| for (var i = 0; i < selectables.length; ++i) { |
| if (i == selected_index) { |
| selectables[i].style.opacity = 1; |
| } else { |
| selectables[i].style.opacity = 0; |
| } |
| } |
| } |
| |
| window.addEventListener('load', function () { |
| // Initialize our set of selectable items. |
| selectables = document.getElementsByClassName('selectable'); |
| Refresh(); |
| }); |
| |
| document.addEventListener('keydown', function (e) { |
| if (e.keyCode == 38) { |
| // Up key was pressed. |
| selected_index -= 1; |
| if (selected_index < 0) { |
| selected_index = selectables.length - 1; |
| } |
| Refresh(); |
| } else if (e.keyCode == 40) { |
| // Down key was pressed. |
| selected_index += 1; |
| if (selected_index >= selectables.length) { |
| selected_index = 0; |
| } |
| Refresh(); |
| } |
| }); |
| </script> |
| </body> |
| </html> |
