将点击的li的边距推到水平列表的中心

时间:2013-01-18 18:13:13

标签: jquery math jquery-animate

我想通过给第一个li边距偏移量将点击的li推到中心(或足够接近)。我的问题是我不完全确定如何进行算术运算。

我尝试过将li的总数除以2然后再乘以li宽度。我认为这会给我中心点。它没有相应的工作。

我很难过。

// set .active class when an li is clicked and push that li to the centre (or close enough.)
$('body').on("click", ".date li", function () {

  var self = $(this),
    li = $('.date li');

  li.removeClass('active');
  self.addClass('active');

  var num = self.index(),
    w = self.width(),
    t = w * (num / 2);

    t = t + 'px';

  // push the margin of the first li
  $('.date li:first-child').animate({ 'margin-left': t });

});

以下是问题的解答:http://jsfiddle.net/vLQgy/1/

1 个答案:

答案 0 :(得分:1)

var num = self.index(),
liwidth = self.width(),
  total_width = $('.date').width(),

half = num / 2.0,
t = total_width / 2 - 84 * num - liwidth / 2;

t = t + 'px';

我使用此代码获得t

这是jsfiddle。 http://jsfiddle.net/vLQgy/2/