javascript - 使用位置 :absolute; with constant scroll 的水平 jquery 滚动条

Question

我已经做到了这一点，它对固定宽度的 div 效果很好，但无法弄清楚如何在 div 的宽度发生变化时操纵它。

问题:如何使此函数考虑到每个“回合”后的不同 div 宽度？

var horizontalScroller = function($elem) {
    var left = parseInt($elem.css("left"));
    var temp = -1 * $('#horizontalScroller li').width();
    if(left < temp) {
        left = $('#horizontalScroller').width();
        $elem.css("left", left);
    }
    $elem.animate({ left: (left-60) }, 2000, 'linear', function () {
      horizontalScroller($(this));
    });
}


$(document).ready(function() {
    var i = 0;
    $("#horizontalScroller li").each(function () {
          $(this).css("left", i);
          i += $(this).width();
          horizontalScroller($(this));
    });

});

工作示例(固定宽度):http://jsfiddle.net/GL5V3/
工作示例(不同宽度):http://jsfiddle.net/wm9gt/

Answer 1

嗯，这有点有趣，理解了你的代码是如何工作的，但在我这样做之前......

我将其重写为:(working fiddle)

function horizontalScroller(ulSelector) {
  var horizontalSpan=0;
  var collection=[];
  function animate(index) {
    var cur=collection[index];
    var left=parseInt(cur.elem.css('left'));
    if(left < cur.reboundPos) {
        left+=horizontalSpan;
        console.log(left);
        cur.elem.css('left',left);
    }
    cur.elem.animate(
      { left: (left-60) },
      2000,
      'linear',
      function () {animate(index)}
    );
  }
  $(ulSelector).find('li').each(function() {
    var $this=$(this);
    var width=$this.width();
    $this.css('left',horizontalSpan);
    collection.push({reboundPos: -1 * width, elem: $this});
    horizontalSpan+=width;
    animate(collection.length-1);
  });
  console.log(collection);
  console.log(horizontalSpan);
}


$(document).ready(function() {
    horizontalScroller('#horizontalScroller');
});

然后我回到您的代码并执行了以下操作:

var horizontalSpan = 0;// swapped i for a "global" variable
var horizontalScroller = function($elem) {
    var left = parseInt($elem.css("left"));
    var temp = -1 * $elem.width();// updated to the correct width
    if(left < temp) {// now out of bounds is properly calculated
        left += horizontalSpan;// proper "wrapping" with just one addition
        $elem.css("left", left);
    }
    $elem.animate({ left: (left-60) }, 2000, 'linear', function () {
      horizontalScroller($(this));
    });
}


$(document).ready(function() { 
    $("#horizontalScroller li").each(function () {
          $(this).css("left", horizontalSpan);// horizontalSpan!!!
          horizontalSpan += $(this).width();// horizontalSpan!!!
          horizontalScroller($(this));
    });
});

如果您有任何疑问或想稍微调整一下。我很乐意帮助你。但我希望你能自己管理。

附言我最初的评论很粗鲁，你水平滚动没问题竖起大拇指(但你希望其中一些 .width() 调用的值有很大不同)