Question

我有一组七 div具有以下属性：

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

我有一个包含这七个块的包装div，只有足够的空间来容纳四个并且更改。

隐藏溢出。

如何制作此功能，以便当您单击并水平拖动或用手指在移动设备上滑动时，整行div块会滑动以显示之前隐藏的那些？

请参阅this jsFiddle for the example。

我们可以在这里使用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/

如何滑动或移动这组Div

5 个答案: