initial commit
This commit is contained in:
commit
c01d2ca559
10 changed files with 150 additions and 0 deletions
47
.gitignore
vendored
Normal file
47
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,47 @@
|
||||||
|
# Compiled source #
|
||||||
|
###################
|
||||||
|
*.com
|
||||||
|
*.class
|
||||||
|
*.dll
|
||||||
|
*.exe
|
||||||
|
*.o
|
||||||
|
*.so
|
||||||
|
|
||||||
|
# Packages #
|
||||||
|
############
|
||||||
|
# it's better to unpack these files and commit the raw source
|
||||||
|
# git has its own built in compression methods
|
||||||
|
*.7z
|
||||||
|
*.dmg
|
||||||
|
*.gz
|
||||||
|
*.iso
|
||||||
|
*.jar
|
||||||
|
*.rar
|
||||||
|
*.tar
|
||||||
|
*.zip
|
||||||
|
|
||||||
|
# Logs and databases #
|
||||||
|
######################
|
||||||
|
*.log
|
||||||
|
*.sql
|
||||||
|
*.sqlite
|
||||||
|
|
||||||
|
# OS generated files #
|
||||||
|
######################
|
||||||
|
.DS_Store
|
||||||
|
.DS_Store?
|
||||||
|
._*
|
||||||
|
.Spotlight-V100
|
||||||
|
.Trashes
|
||||||
|
Icon?
|
||||||
|
ehthumbs.db
|
||||||
|
Thumbs.db
|
||||||
|
|
||||||
|
# Saved #
|
||||||
|
#########
|
||||||
|
*~
|
||||||
|
|
||||||
|
# Directories #
|
||||||
|
##############
|
||||||
|
node_modules
|
||||||
|
build
|
||||||
0
README.md
Normal file
0
README.md
Normal file
47
css/main.css
Normal file
47
css/main.css
Normal file
|
|
@ -0,0 +1,47 @@
|
||||||
|
body, html {
|
||||||
|
margin: 0;
|
||||||
|
background: black;
|
||||||
|
}
|
||||||
|
body > div {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
#top {
|
||||||
|
width: 400px;
|
||||||
|
height: 220px;
|
||||||
|
}
|
||||||
|
#bottom {
|
||||||
|
width: 320px;
|
||||||
|
height: 212px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
#top.one {
|
||||||
|
background: url(../img/one.mpo);
|
||||||
|
}
|
||||||
|
#top.two {
|
||||||
|
background: url(../img/two.mpo);
|
||||||
|
}
|
||||||
|
#top.three {
|
||||||
|
background: url(../img/three.mpo);
|
||||||
|
}
|
||||||
|
#top.four {
|
||||||
|
background: url(../img/four.mpo);
|
||||||
|
}
|
||||||
|
#bottom > a {
|
||||||
|
margin: 10px;
|
||||||
|
display: inline-block;
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
#bottom > a[href*="one"] {
|
||||||
|
background: url(../img/one.mpo);
|
||||||
|
}
|
||||||
|
#bottom > a[href*="two"] {
|
||||||
|
background: url(../img/two.mpo);
|
||||||
|
}
|
||||||
|
#bottom > a[href*="three"] {
|
||||||
|
background: url(../img/three.mpo);
|
||||||
|
}
|
||||||
|
#bottom > a[href*="four"] {
|
||||||
|
background: url(../img/four.mpo);
|
||||||
|
}
|
||||||
0
img/.gitignore
vendored
Normal file
0
img/.gitignore
vendored
Normal file
BIN
img/four.mpo
Normal file
BIN
img/four.mpo
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
BIN
img/one.mpo
Normal file
BIN
img/one.mpo
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 182 KiB |
BIN
img/three.mpo
Normal file
BIN
img/three.mpo
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 140 KiB |
BIN
img/two.mpo
Normal file
BIN
img/two.mpo
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 133 KiB |
19
index.html
Normal file
19
index.html
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>3DS</title>
|
||||||
|
<meta name="viewport" content="width=400px">
|
||||||
|
<link rel="stylesheet" href="css/main.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="top"></div>
|
||||||
|
<div id="bottom">
|
||||||
|
<a href='img/one.mpo'></a>
|
||||||
|
<a href='img/two.mpo'></a>
|
||||||
|
<a href='img/three.mpo'></a>
|
||||||
|
<a href='img/four.mpo'></a>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
<script src='js/main.js'></script>
|
||||||
|
</html>
|
||||||
37
js/main.js
Normal file
37
js/main.js
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
(function(){
|
||||||
|
var center = function(){
|
||||||
|
window.scrollTo(40, 220);
|
||||||
|
};
|
||||||
|
var control = function(ev) {
|
||||||
|
switch(ev.which) {
|
||||||
|
case 13: alert("A"); break; //A
|
||||||
|
case 37: alert("left"); break; //left arrow
|
||||||
|
case 38: alert("up"); break; //up arrow
|
||||||
|
case 39: alert("right"); break; //right arrow
|
||||||
|
case 40: alert("down"); break; //down arrow
|
||||||
|
}
|
||||||
|
};
|
||||||
|
var active = function(ev) {
|
||||||
|
var link = this.href;
|
||||||
|
var top = document.querySelector("#top");
|
||||||
|
if(link.indexOf('one') > -1){
|
||||||
|
top.className = 'one';
|
||||||
|
}else if(link.indexOf('two') > -1) {
|
||||||
|
top.className = 'two';
|
||||||
|
}else if(link.indexOf('three') > -1) {
|
||||||
|
top.className = 'three';
|
||||||
|
}else if(link.indexOf('four') > -1) {
|
||||||
|
top.className = 'four';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', function(ev){
|
||||||
|
setInterval(center, 42);
|
||||||
|
//this.addEventListener("keyup", control, false);
|
||||||
|
var anchors = this.querySelectorAll("#bottom a[href$='.mpo']");
|
||||||
|
for(var i = 0, l = anchors.length; i<l; i++){
|
||||||
|
anchors[i].addEventListener('focus', active, false);
|
||||||
|
}
|
||||||
|
this.querySelector("#bottom a[href*='one']").focus();
|
||||||
|
}, false);
|
||||||
|
})()
|
||||||
Loading…
Add table
Add a link
Reference in a new issue