水平滑动 - 定义开始和结束

Question

我在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;
});

修改：live example

Answer 1

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

代码可能更短，但这更容易理解:)。第一个if取决于元素的宽度;也许你需要改变它或在运行时计算。

Answer 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;
    });


});

Answer 3

这个怎么样：

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

我假设包装div不应该具有正左值。

Answer 4

小提琴：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;
            });
        }
    }