2

私はこれまでに何とか到達し、ソリッド幅の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/

4

1 に答える 1

4

さて、これは少し楽しかったです、あなたのコードがどのように機能するかを理解しました、しかし私がそれをする前に...

私はそれをこれに書き直しました:(作業フィドル）

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

質問がある場合、または少し調整したい場合。よろしくお願いします。しかし、私の希望は、あなたが自分で管理することです。

PS私の最初のコメントは失礼でした、あなたは水平スクロールは大丈夫です（.width()しかし、あなたはそれらの呼び出しのいくつかの値が大きく異なることを望んでいました）

于 2013-01-09T04:08:41.900 に答える