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