jQuery - 单击时滑动重复动画 - 循环

Question

我想要实现的是当用户点击 right 时，green 层向左滑动，并出现 red 框/blue 框将出现在最后。

当我们到达 blue 框时，我希望动画继续循环回到 start，而不是像这里一样变成空白。

感谢任何帮助或建议，谢谢

查看这个小提琴以获得更好的想法：

http://jsfiddle.net/TheDeveloper/5LF8d/8/（点击并按住右按钮）

var main_box = $("div.main_box:first");
$(document).ready(function () {
    $('#left').mousedown(left_scrolling);
    $('#right').mousedown(right_scrolling);
    $('#right').mouseup(stopScrolling);
    $('#left').mouseup(stopScrolling);
});

function stopScrolling() {
    // stop increasing scroll position
    main_box.stop();

}

function left_scrolling() {
    main_box.animate({
        left: '+=50'
    }, 100, 'linear', left_scrolling);
}

function right_scrolling() {
    main_box.animate({
        left: '-=50'
    }, 100, 'linear', right_scrolling);
}

Answer 1

function right_scrolling() {
        if($('.last_box').offset().left < -$('.last_box').width())
            main_box.css('left','0px');
            ...

Fiddle

用于向左滚动

function left_scrolling() {
        if($('.main_box').offset().left+50 >= 0)
            main_box.css('left',(-main_box.width()+window.innerWidth)+'px');
            ...

Answer 2

找出 main_box 的边界并检查滚动函数中的边界条件。

$(".main_box").position()
Object {top: 401, left: -3558.5}

如果您的左边界低于 -3000，您可以使用偏移量将对象“包裹”回另一侧：

伪代码

if(Object.left < -3000){
     $(".main_box").offset({top: 401, left: 3558});
}

如果 div 向另一个方向移动，则需要类似的条件检查和语句来包装 div。

Answer 3

给你：http://jsfiddle.net/5LF8d/10/

var main_box = $("div.main_box:first");
window.leftVal=0;
window.limit=parseInt($('.last_box').css('left').replace(/\D/g,''));
window.limit+=$('.last_box').width();
window.limit+=100;
window.limit=window.limit*(-1);

function right_scrolling() {
    main_box.animate({
        left: '-=50'
    }, 100, 'linear', right_scrolling);
    window.leftVal-=50;
    if(window.leftVal<=window.limit){
        main_box.css('left','0px');
        window.leftVal=0;
    }