如何滑動或移動這組Divs

Question

我有七個具有以下屬性的div集：

height: 100px;
width: 100px;
display: inline-block;

我有一個包裝div，其中包含這七個塊， 只有足夠的空間容納四個塊並進行更改。

溢出被隱藏。

我如何才能使用此功能，以便在單擊並水平拖動或在移動設備上用手指滑動時，整個div塊行都會滑動以顯示以前隱藏的div塊？

有關示例，請參考此jsFiddle 。

我們可以在這里使用css或jQuery。

*獎金，在容器的邊緣顯示原本完全隱藏的div的分數。

Answer 1

根據jfriend00的回答，我對此進行了修改，以便可以在觸摸/單擊並使用鼠標移動的情況下使用。

var last_x = null;
var holding = false;
//Mark the wrapper as clicked/touched
$('.wrapper').mousedown(function(){
    holding=true;
});
//We do this on document so that even if movement goes outside of the container the event will fire
$(document).mouseup(function(){
    holding=false;
});

$('.wrapper').mousemove(function(e){
    if(last_x === null || !holding) //If this is the first movement
    {
        last_x = e.pageX;
        return;
    }
    var ammount = e.pageX - last_x;
    $('.slider',this).css('margin-left', '+=' + ammount);
    last_x = e.pageX;
});

其工作原理的要點是，在容器上檢測到mousedown事件時，腳本將開始跟蹤所有鼠標的移動並使用鼠標移動內容。 釋放鼠標后，它將停止跟蹤運動。

小提琴： http : //jsfiddle.net/NvJam/2/

Answer 2

see here

 .wrapper {
        width: 900px;
        height: 100px;
        overflow: hidden;
    }

Answer 3

您可以放置​​一個額外的容器div，並在該div上使用絕對定位來向左/向右移動項目。 這是一個演示：

http://jsfiddle.net/jfriend00/7edc9/

HTML看起來像這樣：

<div class="wrapper">
    <div class="slider">
        <div class="first">First</div>
        <div class="second">Second</div>
        <div class="third">Third</div>
        <div class="fourth">Fourth</div>
        <div class="fifth">Fifth</div>
        <div class="sixth">Sixth</div>
        <div class="seventh">Seventh</div>
    </div>
</div>

您還不太清楚如何在非觸摸屏上移動它們，但是下面是一些在按鈕上起作用的事件處理程序：

$("#left").click(function() {
    $(".slider").stop(true, true).animate({left: "-=125px"}, 500);
});
$("#right").click(function() {
    $(".slider").stop(true, true).animate({left: "+=125px"}, 500);
});

類似的事情可能會被掛鈎用於觸摸事件。

Answer 4

更好的解決方案：使用可拖動的JQuery UI：

$('.slider').draggable({
    axis: 'x',
});

http://jsfiddle.net/DCuGV/2/

Answer 5

由於沒有人提到jQuery.Kinetic，因此我將其添加為：

<div class="carousel">
    <div class="wrapper">
        <div class="first">First</div>
        <div class="second">Second</div>
        <div class="third">Third</div>
        <div class="fourth">Fourth</div>
        <div class="fifth">Fifth</div>
        <div class="sixth">Sixth</div>
        <div class="seventh">Seventh</div>
    </div>
</div>


$('.carousel').kinetic();

演示： http ： //jsfiddle.net/louisbros/2pRBg/6/