2個圖像在一個div中，滑塊在中間

Question

我想在div上顯示2個圖像。它們最初將通過帶有2個箭頭的句柄線分開。當用戶拖動左邊的句柄線時，左邊的圖像會捕捉更多的空間，與用戶拖動有關。右邊的圖片也是一樣的。我下面這個網站形象的例子 - > [公司網址]：http://california-t.ferrari.com/en/#overview

<div class="content"> 
    <div class="sketch"> 
    </div> 
     <div class="sketch-wrapper"> 
            <div class="before-after sketch-container" style="height: 270px;"> 
             <img class="sketch-before" alt="sketch basis" src="Untitled.jpg" style="clip: rect(0px, 380px, 270px, 0px;"></img> 
             <img class="sketch-after" alt="sketch finished" src="sketch2T.jpg" style=";"></img> 
             <div class="sketch-overlay"> 
              <div class="sketch-before-label"></div> 
              <div class="sketch-after-label"></div> 
             </div> 
             <div class="sketch-handle" style="left: 380px;"> 
              <span class="sketch-left-arrow"></span> 
              <span class="sketch-right-arrow"></span> 
             </div> 
            </div> 
           </div> 


    </div> 

這裏是CSS：

.content { 

    width: 900px; 

    position: relative; 
    margin-left: auto; 
    margin-top:0px; 





} 

.sketch{ 
    width:inherit; 
    height: 1200px; 
    background-image: url(backSketch4.jpg); 
    margin-top: 70px; 

} 

.sketch-wrapper{ 
    height: 270; 
    width: 760px; 
    display:block; 
    margin-top: -1025px; 
    margin-left:70px; 

} 
.sketch-container{ 
    display:block; 
    -mox-box-sizing: content-box; 
    -ms-box-sizing: content-box; 
    -o-box-sizing: content-box; 
    -webkit-box-sizing: content-box; 
    overflow: hidden; 
    position: relative; 
    -moz-user-select: none; 
    -webkit-user-select:none; 
} 
.sketch-before, .sketch-after { 
    margin-top: 0px; 
    width: 100%; 
    position: absolute; 
    top: 0px; 
    display: block; 
    border: 0px; 
    margin: 0px 0px 0px;  
} 
.sketch-before{ 
    z-index: 20; 
} 
.sketch-after{ 
    z-index: 10;  
} 

.sketch-overlay, .sketch-before-label, .sketch-after-label { 
    transition-duration: 0.5s; 
    -webkit-transition-duration: 0.5s; 
    -moz-transition-duration: 0.5s; 
    -ms-transition-duration: 0.5s; 
    -o-transition-duration: 0.5s; 
} 
.sketch-overlay, .sketch-before-label, .sketch-after-label { 
    position: absolute; 

    width: 100%; 
    height: 100%; 

} 
.sketch-before-label, .sketch-after-label{ 
    transition-property: opacity; 
} 
.sketch-before-label:before, .sketch-after-label:before { 
    background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.2); 
    position: absolute; 
    top: 50%; 
    margin-top: -19%; 
    line-height: 38px; 
    padding: 0px 20px; 
    border-radius: 2px; 
} 
.sketch-before-label:before, .sketch-after-label:before { 
    color: #FFF; 
    font-size: 12px; 
    letter-spacing: 0.1em; 
} 
.sketch-handle { 
    height: 38px; 
    width: 38px; 
    position: absolute; 

    top: 50%; 
    margin-left: -22px; 
    margin-top: -22px; 
    border: 3px solid #0F0; 
    border-radius: 1000px; 
    -moz-border-radius: 1000px; 

    -webkit-border-radius:1000px; 
    box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); 
    -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); 
    -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); 

    z-index: 40;  
} 
.sketch-handle:after { 
    top: 50%; 
    margin-top: 22px; 
    box-shadow: 0px -3px 0px #FFF, 0px 0px 12px rgba(51, 51, 51, 0.5); 
} 
.sketch-handle:before { 
    bottom: 50%; 
    margin-bottom: 22px; 
    box-shadow: 0px 3px 0px #FFF, 0px 0px 12px rgba(51, 51, 51, 0.5); 
} 
.sketch-handle:before, .sketch-handle:after { 
    content: " "; 
    display: block; 
    width: 3px; 
    background: none repeat scroll 0% 0% #FFF; 

    height: 9999px; 
    position: absolute; 
    left: 50%; 
    margin-left: -1.5px; 
    z-index: 30; 
    box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); 
    -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); 
} 
.sketch-left-arrow { 

    border-right: 6px solid #F00; 
    left: 50%; 
    margin-left: -17px; 
    box-sizing:content-box; 
    -moz-box-sizing: content-box; 
} 
.sketch-right-arrow { 
    border-left: 6px solid #F00; 
    right: 50%; 
    margin-right: -17px; 
    box-sizing:content-box; 
    -moz-box-sizing: content-box; 
} 
.sketch-left-arrow, .sketch-right-arrow { 
    width: 0px; 
    height: 0px; 
    border: 6px inset transparent; 
    position: absolute; 
    top: 50%; 
    margin-top: -6px; 
} 

結果我迄今是這樣，滑塊不移動第二個圖像是不可見從中心到右...我認爲有什麼錯誤的CSS ... http://imageshack.com/a/img855/517/i7wf.jpg

Answer 1

這是我的企圖。
它可能需要一些微調。

http://jsfiddle.net/7Geh2/2/

見的jsfiddle的代碼

<div> 
    <img id="img-1" src="http://california-t.ferrari.com/en/wp-content/uploads/sites/2/2014/01/149m_overview_slide_blue.jpg"/> 
    <img id="img-2" src="http://california-t.ferrari.com/en/wp-content/uploads/sites/2/2014/01/149m_overview_slide_red.jpg"/> 
    <div id="handle"></div> 
</div>