jQuery .position().left 和变量答案

【问题标题】：jQuery .position().left and variablesjQuery .position().left 和变量
【发布时间】：2014-10-27 15:29:01
【问题描述】：

如何使用下面的 jQuery 使滑块只向左滑动到“红色”幻灯片，向右滑动到“绿色”幻灯片？我觉得我错过了一些简单的东西，但我现在还没有看到它。 moveLeft 函数似乎有效，但 moveRight 无效。

var slideWidth = $('#mySliderContainer').width();
var slideCountWidth = $('#mySlider').children().length;

var min = 0;
var max = -(slideCountWidth -1) * slideWidth;

function moveLeft() {
  $('#mySlider').animate({
    left: '+='+slideWidth
  }, 400);
  if($('#mySlider').position().left >= min) {
    $('#mySlider').animate({left: '-='+slideWidth});
  }
};

function moveRight() {
  $('#mySlider').animate({
    left: '-='+slideWidth
  }, 400);
  if($('#mySlider').position().left <= max) {
    $('#mySlider').animate({left: '+='+slideWidth});
  }
};

实现 jQuery 的链接位于jsFiddle。

理想情况下，如果您尝试越过最小和最大幻灯片，它应该会弹回（“红色”或“绿色”幻灯片）。我显然对这段代码做错了。

var max = -(slideCountWidth -1) * slideWidth;

【问题讨论】：

标签： jquery html css variables position

【解决方案1】：

您的max 正确，因为拖动工作正常。您的问题似乎是您正在断开moveRight() 中的弹回脚本并与正常动画并行。这意味着当您检查position().left <= max 时，div 往往在幻灯片之间，比较不准确。

我会在您执行标准动画之前进行位置检查，然后如果需要，将反弹链接回标准动画：

function moveLeft() {
    var isMin = $('#mySlider').position().left >= min;
    var a  = $('#mySlider').animate({
        left: '+='+slideWidth
    }, 400);

    if(isMin) {
        a.animate({left: '-='+slideWidth});
    }
};

function moveRight() {
    var isMax = $('#mySlider').position().left <= max + slideWidth;
    var a = $('#mySlider').animate({
        left: '-='+slideWidth
    }, 400);

    if(isMax) {
        a.animate({left: '+='+slideWidth});
    }
};

Updated Fiddle

【讨论】：

【解决方案2】：

你是对的，问题是你的最大值没有考虑到滑块容器对左侧滑块位置值的贡献的边距。

将您的最大计算更改为：

var max = (-(slideCountWidth -1) * slideWidth) + parseFloat($("#mySliderContainer").css("marginLeft")) ;

http://jsfiddle.net/uhtxtnks/9/

为了澄清，您可以在 moveRight() 函数中添加一个警报，以在动画后输出 $('#mySlider').position().left 的值。请注意，当您到达绿色幻灯片时，该值实际上是 -629.5（至少在我的小提琴上），而不是您期望的 -750。这是因为 jQuery .position().left 方法将 #mySliderContainer 元素的左边距添加到偏移量，并且该边距为 120.5（在我的小提琴上）。因此，考虑到这一点，您只需将该容器左边距添加到最大值计算中。

【讨论】：