Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
.input-file{
display: block;
margin: 16px 0;
}
.message{
padding-left: 12px;
color: red;
}
.img-preview{
width: 100px;
}
/* */
#slide-outer{
box-sizing: border-box;
height: 85vh;
position: relative;
border: 1px solid #9E9E9E;
user-select: none;
}
.slide-unit{
display: flex;
align-items: center;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
background-color: #fff;
}
.img-slide{
user-drag: none;
-webkit-user-drag: none;
-moz-user-select: none;
pointer-events: none;
}
#slideA{
width: 50%;
z-index: 2;
}
#slideB{
z-index: 1;
}
#slidebar{
box-sizing: border-box;
width: 4px;
height: 100%;
position: absolute;
z-index: 3;
border: #fff solid;
border-width: 0 1px;
background-color: #616161;
cursor: col-resize;
}
.bt-slide{
position: absolute;
bottom: 4px;
z-index: 5;
cursor: pointer;
user-select: none;
}
#bt-slide-left{
left: 4px;
}
#bt-slide-right{
right: 4px;
}
/* */
.switch-outer{
display: flex;
flex-direction: column;
box-sizing: border-box;
height: 85vh;
border: 1px solid #9E9E9E;
}
.switch-box{
flex-grow: 1;
position: relative;
}
.img-switch{
width: 100%;
height: 100%;
object-fit: contain;
position: absolute;
background-color: #fff;
}
#switchA{
z-index: 2;
}
#switchB{
z-index: 1;
}
#bt-switch{
display: block;
padding: 4px 12px;
margin: 8px auto;
cursor: pointer;
user-select: none;
}
<h3>画像読み込み</h3>
<input type="file" class="input-file">
<div class="message"></div>
<input type="file" class="input-file">
<div class="message"></div>
<div class="preview-box">
<img src="" alt="" class="img-preview">
<img src="" alt="" class="img-preview">
</div>
<h3>スライド比較</h3>
<div id="slide-outer">
<div id="slideA" class="slide-unit">
<img src="" alt="" class="img-slide">
</div>
<div id="slideB" class="slide-unit">
<img src="" alt="" class="img-slide">
</div>
<div id="slidebar"></div>
<button id="bt-slide-left" class="bt-slide"></button>
<button id="bt-slide-right" class="bt-slide"></button>
</div>
<h3>スイッチ比較</h3>
<div class="switch-outer">
<div class="switch-box">
<img src="" alt="" id="switchA" class="img-switch">
<img src="" alt="" id="switchB" class="img-switch">
</div>
<div class="switch-control">
<button id="bt-switch">比較</button>
</div>
</div>
//画像読み込み
const input_file = document.getElementsByClassName('input-file');
const message = document.getElementsByClassName('message');
const img_preview = document.getElementsByClassName('img-preview');
[...input_file].forEach((el,i)=>{
el.addEventListener('change',e=>{
fileCheck(e,i);
});
});
//スライド比較
const slide_outer = document.getElementById('slide-outer');
const slideA = document.getElementById('slideA');
const img_slide = document.getElementsByClassName('img-slide');
const slidebar = document.getElementById('slidebar');
let slidebar_moving = false;
[...img_slide].forEach(img=>{
img.onload = ()=>{imageResize(img)};
});
slidebar.style.transform = `translateX(${slide_outer.clientWidth/2}px)`;
slidebar.addEventListener('pointerdown',slidebarMoveStart);
slide_outer.addEventListener('pointermove',slidebarMove);
slide_outer.addEventListener('pointerup',slidebarMoveEnd);
slide_outer.addEventListener('pointerleave',slidebarMoveEnd);
const bt_slide_left = document.getElementById('bt-slide-left');
const bt_slide_right = document.getElementById('bt-slide-right');
bt_slide_left.addEventListener('pointerdown',()=>{slideStart(-1)});
bt_slide_left.addEventListener('pointerup',()=>{slideEnd()});
bt_slide_left.addEventListener('pointerleave',()=>{slideEnd()});
bt_slide_right.addEventListener('pointerdown',()=>{slideStart(1)});
bt_slide_right.addEventListener('pointerup',()=>{slideEnd()});
bt_slide_right.addEventListener('pointerleave',()=>{slideEnd()});
//スイッチ比較
const img_switch = document.getElementsByClassName('img-switch');
const switchA = document.getElementById('switchA');
const bt_switch = document.getElementById('bt-switch');
bt_switch.addEventListener('pointerdown',switchOn);
bt_switch.addEventListener('pointerup',switchOff);
bt_switch.addEventListener('pointerleave',switchOff);
//サンプル画像読み込み
img_slide[0].src = '../img/sample01.jpg';
img_slide[1].src = '../img/sample01-2.jpg';
img_switch[0].src = '../img/sample01.jpg';
img_switch[1].src = '../img/sample01-2.jpg';
//関数
function fileCheck(e,i){
message[i].textContent = '';
const files = e.target.files;
if(files.length==0){
return;
}
img_preview[i].src = '';
if(files[0].type.indexOf('image')==-1){
e.target.value = '';
message[i].textContent = '画像ファイルを選択してください。';
return;
}
const reader = new FileReader();
reader.onload = ev=>{
img_preview[i].src = ev.target.result;
img_slide[i].src = ev.target.result;
img_switch[i].src = ev.target.result;
}
reader.readAsDataURL(files[0]);
}
function imageResize(img){
const outer_w = slide_outer.clientWidth;
const outer_h = slide_outer.clientHeight;
const img_w = img.naturalWidth;
const img_h = img.naturalHeight;
const rate_outer = outer_h/outer_w;
const rate_img = img_h/img_w;
if(rate_outer>=rate_img){
//width合わせ
const new_h = (outer_w/img_w)*img_h;
img.style.width = outer_w+'px';
img.style.height = new_h+'px';
}else{
//height合わせ
const new_w = (outer_h/img_h)*img_w;
img.style.width = new_w+'px';
img.style.height = outer_h+'px';
img.style.transform = `translateX(${(outer_w-new_w)/2}px)`;
}
}
function slidebarMoveStart(){
slidebar_moving = true;
}
function slidebarMove(e){
if(!slidebar_moving) return;
const d = e.pageX - (window.pageXOffset + slide_outer.getBoundingClientRect().left);
const x = (()=>{
if(d<0){
return 0;
}else if(d>slide_outer.clientWidth){
return slide_outer.clientWidth;
}else{
return d;
}
})();
slidebar.style.transform = `translateX(${x}px)`;
slideA.style.width = x+'px';
}
function slidebarMoveEnd(){
slidebar_moving = false;
}
{
let slidetimer;
function slideStart(diff){
slidetimer = setInterval(()=>{
const d = slideA.clientWidth + diff;
const x = (()=>{
if(d<0){
return 0;
}else if(d>slide_outer.clientWidth){
return slide_outer.clientWidth;
}else{
return d;
}
})();
slidebar.style.transform = `translateX(${x}px)`;
slideA.style.width = x+'px';
},10);
}
function slideEnd(){
clearInterval(slidetimer);
}
}
function switchOn(){
switchA.classList.add('hide');
}
function switchOff(){
switchA.classList.remove('hide');
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment