0

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

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

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

溢出是隐藏的。

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

请参考这个 jsFiddle 的例子。

我们可以在这里使用 css 或 jQuery。

*奖励，在容器边缘显示部分完全隐藏的 div。

4

5 回答 5

2

根据 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/

于 2013-04-18T20:43:57.080 回答
1

see here

 .wrapper {
        width: 900px;
        height: 100px;
        overflow: hidden;
    }
于 2013-04-18T20:30:16.203 回答
1

您可以放置​​一个额外的容器 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);
});

可以为触摸事件连接类似的东西。

于 2013-04-18T20:32:26.907 回答
1

更好的解决方案：使用可拖动的 JQuery UI：

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

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

于 2013-04-18T21:08:57.473 回答
1

由于没有人提到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/

于 2013-04-18T21:21:39.733 回答