水平传送带正在缩小差距

我遇到this great stack您可以在其中建立垂直传送带。我实现了自己的代码版本，使所有内容都水平滑动。水平传送带正在缩小差距

它工作的很好，但为了它的工作，你必须知道水平画廊将会有多少图片，以便我们可以调整代码。否则，图像会低于另一个。我有谁知道如何使代码适应画廊的实际宽度？

window.clients = function($elem) { 
    var left = parseInt($elem.css("left")); 
    var $cp = $("#clients .client"); 
    var temp = -1 * $cp.width(); 
    var guarda = []; 

    $cp.each(function() { 
     quantos.push($(this).width()); 
    }); 

    var quantos = guarda.length(); 

    if(left < temp) { 
     left = $("#clients").width(); 
     $elem.css("left", left); 
    } 
    $elem.animate({ left: (parseInt(left)-230) }, 1000, "linear", function() { 
     window.clients($(this)); 
    }); 
}; 

$(function() { 
    $(document).ready(function() { 
     var i = 0; 
     $("#clients .client").each(function() { 
      $(this).css("left", i); 
      i += 230; 
      window.clients($(this)); 
     }); 
    }); 

    $(".client").hover(function() { 
     $(this).children("h3").stop().fadeIn("fast"); 
    }, function() { 
     $(this).children("h3").stop().fadeOut("fast"); 
    }); 
});

来源

2014-10-02 Digger

我更改了一些代码（请检查： - http://jsfiddle.net/rNXs9/1203/）。示例代码会给你每个内部div的宽度，变量将提醒所有div的总宽度。

在CSS

#verticalScroller > div{ 
    /*position:absolute;*/ 
    width:50px; 
    height:50px; 
    border: 1px solid blue; 
    overflow:hidden; 
    float: left; 
}

在JS

window.clients = function($elem) { 
    var left = parseInt($elem.css("left")); 
    var $cp = $("#clients .client"); 
    var temp = -1 * $cp.width(); 
    var guarda = []; 

    $cp.each(function() { 
     quantos.push($(this).width()); 
    }); 

    var quantos = guarda.length(); 

    if(left < temp) { 
     left = $("#clients").width(); 
     $elem.css("left", left); 
    } 
    $elem.animate({ left: (parseInt(left)-230) }, 1000, "linear", function() { 
     window.clients($(this)); 
    }); 
}; 

$(function() { 
    $(document).ready(function() { 
     var i = 0; 
     $("#clients .client").each(function() { 
      $(this).css("left", i); 
      i += 230; 
      window.clients($(this)); 
     }); 

    ///this is I was changed for your understanding 
     var totalinnerdivwidth = 0; 
     $("#verticalScroller").find("div").each(function() { 
      alert($(this).width()); 
      totalinnerdivwidth += $(this).width(); 
      }); 
     alert(totalinnerdivwidth); 
    }); 
    ///// 

    $(".client").hover(function() { 
     $(this).children("h3").stop().fadeIn("fast"); 
    }, function() { 
     $(this).children("h3").stop().fadeOut("fast"); 
    }); 

});

来源

2014-10-02 08:12:52 Ajay2707

非常感谢，Ajay！我设法使它几乎工作。我得到的唯一问题是，在第一次迭代之后，第一个和最后一个框之间存在差距（框的大小）。这里是小提琴：http://jsfiddle.net/GuiHarrison/o8m219v5/ – Digger 2014-10-02 16:01:44

此外，这段代码沉重的内存？我有一个印象，那就是看每一个盒子太苛刻。有没有办法让它平滑？ – Digger 2014-10-02 16:03:31

我已经找到了完美的解决方案！我的优点绝对不是，我发现this other stack（这完全值得更多的赞扬，这是不可思议的答案得到如此之少的点）。优雅的解决方案os滚动，而不是移动元素。这种思维转变使得整个代码变得非常干燥和无记忆！

这是my adapted Bin。

来源

2014-10-02 20:15:35 Digger

水平传送带正在缩小差距

回答

相关问题