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>
|
||||||