예제에서와 같이 수직 슬라이더를 보관하는 방법은 무엇입니까?

누군가이 효과가 어떻게 불려지는지 알 수 있습니까? 어떻게 수행됩니까?예제에서와 같이 수직 슬라이더를 보관하는 방법은 무엇입니까?

이미 이와 같은 시도를 해봤지만 버그가 있으며 제대로 작동하지 않습니다. 또한 전체 화면 모드에서는 좋지 않습니다. 효과는 여기에서 찾을 수 있습니다

var img1 = document.getElementById('img1'); 
    var img2 = document.getElementById('img2'); 
    var border = document.getElementById('border'); 

    img1.onmousemove = redraw; 
    img2.onmousemove = redraw; 
    border.onmousemove = redraw; 


    function redraw(e){ 
    posx = e.pageX - findPosX(img1); 

    if (posx!=null&&posx>0&&posx<1600){ 
     img1.style.width=posx+"px"; 

     img2.style.backgroundPosition=(-posx)+"px"; 
     img2.style.left=posx+"px"; 
     img2.style.width=(1600-posx)+"px"; 

     border.style.left=(posx-100)+"px"; 
    } 

    } 


    function findPosX(obj){ 
    var curleft = 0; 
    if(obj.offsetParent) 
    while(1){ 
     curleft += obj.offsetLeft; 
     if(!obj.offsetParent) 
     break; 
     obj = obj.offsetParent; 
    } 
    else if(obj.x) 
    curleft += obj.x; 
    return curleft; 
}

https://jsfiddle.net/y7nfzw6z/

: 내가 웹 사이트의 스크린 샷을 추가 할 것입니다 http://www.e2save.com/if-only-it-was-4k/

처음 두 이미지는

<div style="position:relative;height:720px;"> 
    <img src="http://placehold.it/95x85" width="95" height="85" style="position:absolute;left:14px;top:27px;z-index:1000;" /> 
    <img src="http://placehold.it/120x465" width="120" height="465" style="position:absolute;left:0;top:145px;z-index:1001;" /> 
    <div id="img1" style="width:1920px;height:1080px;background-image:url('https://unsplash.it/g/1920/1080?image=0');position:absolute;left:0px;"></div> 
    <div id="img2" style="width:1920px;height:1080px;background-image:url('https://unsplash.it/1920/1080?image=0');position:absolute;left:0px;"></div> 
    <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/273339-200.png" width="200" height="200" style="position:absolute;background-color: rgba(255, 255, 255, 0.25); top: 50%;" id="border" /> 
</div>

JS 로고 및 탐색하다 그래서 당신은 내가 의미하는 효과를 볼 수 있습니다.