我如何獲得此前/後滑塊工作？

-1

我試圖讓this plug in工作，但有些事情是不對的。我如何獲得此前/後滑塊工作？

這裏的問題：http://www.youtube.com/watch?v=dIGFsBBcdTQ&feature=youtu.be

這是我的HTML文檔的<head>：

<script> 

var $after = $('.after'), 
     img_width = $('.after img').width(), 
     init_split = Math.round(img_width/2); 

    $after.width(init_split); 

     $('.before_after_slider').mousemove(function(e){ 
     var offX = (e.offsetX || e.clientX - $after.offset().left); 
      $after.width(offX); 
     }); 

     $('.before_after_slider').mouseleave(function(e){ 
     $after.stop().animate({ 
     width: init_split 
     },1000) 
     }); 

</script>

這是身體：

<div class="before_after_slider"> 
     <div class="before"> 
     <img src="center_before.jpg" width="100%" height="100%" alt="before" /> 
     </div> 
     <div class="after"> 
     <img src="center_after.jpg" width="100%" height="100%" alt="after" /> 
     </div> 
    </div>

這是CSS

.before_after_slider { 
    position: relative; 

    & > * { 
    position: absolute; 
    } 
} 

.after { 
    overflow: hidden; 
}

來源

2013-11-23 rs19

[*** DOCUMENT READY ***]（http://api.jquery.com/ready/） – adeneo

@adeneo確定現在的js是工作，但在滑塊移動的第二個圖像橫向，它不在另一個之上.. – rs19

定位問題 – adeneo

當DOM準備就緒時調用函數。

嘗試：

$(document).ready(function() { 
    var $after = $('.after'), 
     img_width = $('.after img').width(), 
     init_split = Math.round(img_width/2); 

    $after.width(init_split); 

    $('.before_after_slider').mousemove(function (e) { 
     var offX = (e.offsetX || e.clientX - $after.offset().left); 
     $after.width(offX); 
    }); 

    $('.before_after_slider').mouseleave(function (e) { 
     $after.stop().animate({ 
      width: init_split 
     }, 1000) 
    }); 
});

來源

2013-11-23 16:37:47 Hiral

謝謝！這是現在的問題。 http://www.youtube.com/watch?v=dIGFsBBcdTQ&feature=youtu.be – rs19

我如何獲得此前/後滑塊工作？

回答

相關問題