Question

我正在构建一个多屏幕jQuery功能，它本质上是一个幻灯片，每张幻灯片上都有内容。幻灯片位于内嵌块中，并使用css的left属性移动。然而，定位是不准确的，并且当滑动通过它们时导致滑动件逐渐偏离位置。我删除了动画，以便更清楚地显示移位。见这里：

var curr = 0;

$('.next').on('click', function(){
    curr++;
    $('.items').css('left', (curr*-140) + 'px')
})

$('.back').on('click', function(){
    curr--;
    $('.items').css('left', (curr*-140) + 'px')
})

http://jsfiddle.net/S8pdH/1/

非常感谢任何帮助！

Answer 1

您只是将元素的宽度移动了元素宽度，但是忽略了项目之间的空间。

项目之间的间距是4像素宽，我在your fiddle here中更改了它。

基本上，您只需要找到元素的宽度和间距，然后将div移动该数量。

$('.next').on('click', function(){
    var distanceBetweenDivs = ($($(".item")[1]).offset().left - ($($(".item")[0]).offset().left)); //144

    curr++;
    $('.items').css('left', (curr*-distanceBetweenDivs)+ 'px')
})

$('.back').on('click', function(){
    var distanceBetweenDivs = ($($(".item")[1]).offset().left - ($($(".item")[0]).offset().left)); //144

    curr--;
    $('.items').css('left', (curr*-distanceBetweenDivs) + 'px')
})

（编辑：如果.item元素之间的间距始终相同，并且您不想使用静态位置更改，则可以找到它们之间的确切差异，如我在{{3}中所示}。）

Answer 2

如果HTML文档中div开始和结束标记（幻灯片）之间有任何空格，并且它们位于inline-block，则网页上也会显示它们之间的空格。

解决方案：删除标签之间的空白区域

<div class="item">
...
</div><div class="item"> <!-- no space between closing and opening tag -->
...
</div>

另一个，恕我直言不太优雅的解决方案是为父母设置font-size: 0，然后为单个项目重置

.items {
    font-size: 0;
}
.items .item {
    font-size: 16px; /* or whatever you want */
}

CSS左侧定位不准确

2 个答案: