水平傳送帶正在縮小差距

我遇到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

水平傳送帶正在縮小差距

回答

相關問題