0

次のプロパティを持つ7 つの div のセットがあります。

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

私はこれらの 7 つのブロックを含むラッパー div を持っており、4 つと変更するのに十分なスペースしかありません。

オーバーフローは隠されています。

クリックして水平方向にドラッグするか、モバイルで指でスワイプすると、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

さらに良い解決策: ドラッグ可能な JQuery UI を使用します。

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

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

于 2013-04-18T21:08:57.473 に答える
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 に答える