initial commit
BIN
assets/frame1/0.JPG
Normal file
|
After Width: | Height: | Size: 434 KiB |
BIN
assets/frame1/1.JPG
Normal file
|
After Width: | Height: | Size: 213 KiB |
BIN
assets/frame1/2.JPG
Normal file
|
After Width: | Height: | Size: 554 KiB |
BIN
assets/frame1/3.JPG
Normal file
|
After Width: | Height: | Size: 777 KiB |
BIN
assets/frame1/4.JPG
Normal file
|
After Width: | Height: | Size: 197 KiB |
BIN
assets/frame1/5.JPG
Normal file
|
After Width: | Height: | Size: 203 KiB |
BIN
assets/frame1/6.JPG
Normal file
|
After Width: | Height: | Size: 483 KiB |
BIN
assets/frame1/7.JPG
Normal file
|
After Width: | Height: | Size: 1.2 MiB |
BIN
assets/frame2/0.JPG
Normal file
|
After Width: | Height: | Size: 64 KiB |
BIN
assets/frame2/1.JPG
Normal file
|
After Width: | Height: | Size: 365 KiB |
BIN
assets/frame2/2.JPG
Normal file
|
After Width: | Height: | Size: 9.5 MiB |
BIN
assets/frame2/3.JPG
Normal file
|
After Width: | Height: | Size: 266 KiB |
BIN
assets/frame2/4.JPG
Normal file
|
After Width: | Height: | Size: 1.7 MiB |
BIN
assets/frame2/5.JPG
Normal file
|
After Width: | Height: | Size: 563 KiB |
BIN
assets/frame2/6.JPG
Normal file
|
After Width: | Height: | Size: 624 KiB |
BIN
assets/frame2/7.JPG
Normal file
|
After Width: | Height: | Size: 386 KiB |
BIN
css/.index.css.swp
Normal file
42
css/index.css
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
html, body {
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.side {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#left.side {
|
||||
width: 55%;
|
||||
}
|
||||
|
||||
#right.side {
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
#left.side .frame {
|
||||
background-size:contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#right.side .frame {
|
||||
background-size:contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.frame {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
17
index.html
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>TITLE</title>
|
||||
<link rel="stylesheet" href="css/index.css">
|
||||
</head>
|
||||
<body>
|
||||
<script src="js/index.js"></script>
|
||||
<div id="left" class="side">
|
||||
<div class="frame"></div>
|
||||
</div><!--
|
||||
--><div id="right" class="side">
|
||||
<div class="frame"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
js/.index.js.swp
Normal file
86
js/index.js
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
MAX_IMG_NUMBER = 7
|
||||
ASSET_PATH = "\"assets/frame1/"
|
||||
ASSET_SUFFIX = ".JPG\""
|
||||
|
||||
var frames = [
|
||||
{
|
||||
DOMElement : "",
|
||||
IMGCounter : 0,
|
||||
},
|
||||
{
|
||||
DOMElement : "",
|
||||
IMGCounter : 0,
|
||||
},
|
||||
{
|
||||
DOMElement : "",
|
||||
IMGCounter : 0,
|
||||
}
|
||||
]
|
||||
|
||||
FOOBAR = ""
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
frames[0].DOMElement = document.querySelector("#left.side .frame")
|
||||
frames[1].DOMElement = document.querySelector("#right.side .frame")
|
||||
|
||||
frames.forEach(function(val, i) {
|
||||
if (frames[i].DOMElement != "") {
|
||||
nextImage(frames[i])
|
||||
}
|
||||
});
|
||||
|
||||
}, false);
|
||||
|
||||
document.addEventListener("keypress", function(keyEvent) {
|
||||
switch (keyEvent.key) {
|
||||
case "q":
|
||||
targetFrame = frames[0]
|
||||
prevImage(targetFrame)
|
||||
break;
|
||||
case "w":
|
||||
targetFrame = frames[0]
|
||||
nextImage(targetFrame)
|
||||
break;
|
||||
case "a":
|
||||
targetFrame = frames[1]
|
||||
prevImage(targetFrame)
|
||||
break;
|
||||
case "s":
|
||||
targetFrame = frames[1]
|
||||
nextImage(targetFrame)
|
||||
break;
|
||||
case "y":
|
||||
targetFrame = frames[2]
|
||||
prevImage(targetFrame)
|
||||
break;
|
||||
case "x":
|
||||
targetFrame = frames[2]
|
||||
nextImage(targetFrame)
|
||||
break;
|
||||
}
|
||||
}, false);
|
||||
|
||||
function nextImage(targetFrame) {
|
||||
console.log(targetFrame)
|
||||
if (targetFrame.IMGCounter >= MAX_IMG_NUMBER) {
|
||||
targetFrame.IMGCounter = 0
|
||||
} else {
|
||||
targetFrame.IMGCounter++
|
||||
}
|
||||
|
||||
setFrameImage(targetFrame.DOMElement, ASSET_PATH + targetFrame.IMGCounter + ASSET_SUFFIX)
|
||||
}
|
||||
|
||||
function prevImage(targetFrame) {
|
||||
if (targetFrame.IMGCounter <= 0) {
|
||||
targetFrame.IMGCounter = MAX_IMG_NUMBER
|
||||
} else {
|
||||
targetFrame.IMGCounter--
|
||||
}
|
||||
|
||||
setFrameImage(targetFrame.DOMElement, ASSET_PATH + targetFrame.IMGCounter + ASSET_SUFFIX)
|
||||
}
|
||||
|
||||
function setFrameImage(frame, imgPath) {
|
||||
frame.style.backgroundImage = "url(" + imgPath + ")"
|
||||
}
|
||||
55
test.html
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>TITLE</title>
|
||||
<link rel="stylesheet" href="css/index.css">
|
||||
</head>
|
||||
<body>
|
||||
<input type="file" id="files" name="files[]" multiple />
|
||||
<output id="list"></output>
|
||||
|
||||
<script>
|
||||
function handleFileSelect(evt) {
|
||||
files = evt.target.files; // FileList object
|
||||
|
||||
// files is a FileList of File objects. List some properties.
|
||||
var output = [];
|
||||
for (var i = 0, f; f = files[i]; i++) {
|
||||
output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
|
||||
f.size, ' bytes, last modified: ',
|
||||
f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
|
||||
'</li>');
|
||||
}
|
||||
document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
|
||||
}
|
||||
|
||||
document.getElementById('files').addEventListener('change', handleFileSelect, false);
|
||||
</script>
|
||||
</body>
|
||||
<div id=d="files" name="files[]" multiple />
|
||||
<output id="list"></output>
|
||||
|
||||
<script>
|
||||
function handleFileSelect(evt) {
|
||||
var files = evt.target.files; // FileList object
|
||||
|
||||
// files is a FileList of File objects. List some properties.
|
||||
var output = [];
|
||||
for (var i = 0, f; f = files[i]; i++) {
|
||||
output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
|
||||
f.size, ' bytes, last modified: ',
|
||||
f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
|
||||
'</li>');
|
||||
}
|
||||
document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
|
||||
}
|
||||
|
||||
document.getElementById('files').addEventListener('change', handleFileSelect, false);
|
||||
</script>u"left" class="side">
|
||||
<div class="frame"></div>
|
||||
</div><!--
|
||||
--><div id="right" class="side">
|
||||
<div class="frame"></div>
|
||||
</div>
|
||||
</html>
|
||||