3

次のようなdivに（相対位置を使用して）水平スライドがあります：

ここに画像の説明を入力

それに応じて左右にスライドしますが、スライドコンテナの開始と終了の両方で停止させるのに問題があるため、次のようになります。

ここに画像の説明を入力

これがJS（jquery）です：

$('.timeline-nav').on('click', function() {

    if (!anim)
    {
        anim = true;

        var pos = $(this).hasClass('left') ? 320 : -320;

        pos = parseInt($('.timeline-content-wrapper').css('left')) + pos;

        $('.timeline-content-wrapper').animate({'left': pos}, 600, function() {
            anim = false;
        });
    }

    return;
});

編集：ライブの例

4

4 に答える 4

2 
pos = parseInt($('.timeline-content-wrapper').css('left')) + pos;
if (pos < -1120) pos = -1120;
if (pos > 0) pos = 0;

コードは短くなる可能性がありますが、それはより理解しやすいです:)。最初の if は要素の幅に依存します。変更するか、実行時に計算する必要があるかもしれません。

于 2012-11-29T09:23:59.673 に答える
2

ここですべてが機能していることを確認してください：

http://jsfiddle.net/yUe23/1/

いくつかのクラス (timeline-content-wrapper) を id に変更し、その周りにいくつかの HTML を想像しました (timeline-content-mask)

var anim=false;
var pos=0;
var originalPos=0;

$(function() {

    originalPos=$('#timeline-content-wrapper').offset().left;


    $('.timeline-nav').click( function() {

        if (!anim) {

            var $wrapper=$('#timeline-content-wrapper');
            var $mask=$('#timeline-content-mask');        

            var pos = $(this).hasClass('left') ? 200 : -200;
            var wid=$wrapper.width();
            var maskWid=$mask.width();
            var oldPos=$wrapper.offset().left;

            anim = true;

            // alert(parseInt($wrapper.offset().left)+" "+pos+" "+originalPos+" "+originalPos+" "+wid+" "+maskWid);

            pos = parseInt($wrapper.offset().left)-originalPos + pos;

            if(pos<-wid+maskWid) pos=-wid+maskWid;
            else if(pos>0) pos=0;

            $wrapper.animate({'left': pos}, 600, function() {
                anim = false;
            });

        }

        return;
    });


});
于 2012-11-29T09:36:18.870 に答える
0

これはどう：

pos = Math.min(parseInt($('.timeline-content-wrapper').css('left')) + pos, 0);

ラッパー div は正の左の値を持つべきではないと仮定しています。

于 2012-11-29T09:23:35.043 に答える
0

フィドル: http://jsfiddle.net/ktszm/5/

        var max_width = 250;      
        var width_of_viewport = 200;            
        var stopper = max_width - width_of_viewport;  
        var container_position = $('.timeline-content-wrapper').position().left;



        if(container_position == 0 && $(this).hasClass('left')) 
        { 
           pos = 0; 
        }
        else if(container_position == (stopper*-1) && !$(this).hasClass('left')) 
        { 
           pos = 0; 
        }
        else 
        { 
           $('.timeline-content-wrapper').animate({'left': '+='+pos}, 600, function() {
                anim = false;
            });
        }
    }

</p>

于 2012-11-29T09:55:50.167 に答える