在两个特定像素点之间滚动答案

【问题标题】：Scrolling between two specific pixel point在两个特定像素点之间滚动
【发布时间】：2014-07-12 09:22:24
【问题描述】：

这是我的代码：

$(document).ready(function(){
    $(".right").click(function () {
            $("p").animate({right: "-=64px"});
    });
$(".left").click(function(){
        $("p").animate({right: "+=64"});
    });

我如何制作两个特定的像素点，我的图标只是在它们之间移动。

这是我的Fiddle

我希望我的图标在表格中导航，并且只要它们到达灰色的末尾，就停止并且不再移动。只是可以在另一个按钮上反向移动。

.css("right") 可以吗？如果是，请指导我如何。

谢谢。

【问题讨论】：

这样吗？ jsfiddle.net/n759P/3
没有。如果它到达那条灰线的末端，就不要再往那一边移动了，在这种情况下，当我在任何按钮上双击时，图标将超出那条灰线

标签： jquery css navigation

【解决方案1】：

这是小提琴：http://jsfiddle.net/VQwtp/3/

var movementFactor = 30;

var minWidth = $('#animSubject').width();
var maxWidth = $('#animArea').width();

$("#right").click(function () {
    var subWidth = $('#animSubject').width();
    if (maxWidth > (subWidth + movementFactor)) {
        $("#animSubject").animate({
            width: "+=" + movementFactor + "px"
        });
    } else if (maxWidth > subWidth) {
        $("#animSubject").animate({
            width:(maxWidth) + "px"
        });
    }

});
$("#left").click(function () {
    var subWidth = $('#animSubject').width();
    if (minWidth < (subWidth - movementFactor)) {
        $("#animSubject").animate({
            width: "-=" + movementFactor + "px"
        });
    } else if (minWidth < subWidth) {
        $("#animSubject").animate({
            width:(minWidth) + "px"
        });
    }
});

您可以改变movementFactor 以一键移动所需距离的图像。

【讨论】：

【解决方案2】：

我在这里创建了plnkr，你可以查看

【讨论】：

谢谢，我明白了。但它与一个图标一起工作，如果我再添加 3 个图标，它将无法工作。我希望它通过任何点击移动例如 50px，直到到达灰线的末端。
你可以计算rightend，即offset().left+width()。然后只需应用逻辑进行计算 if(img.offset.left
请让我检查一下。感谢您的帮助

【解决方案3】：

我为你做了一个新的小提琴，

关键是，如果您希望某物在 2 点之间移动，则不应使用“-=64px”或“+=64px”。

只使用一个静态点。

Fiddle

这意味着你应该使用类似的东西：

$(document).ready(function(){
$(".right").click(function () {
        $("p").animate({right: "0"});
});
$(".left").click(function(){
    $("p").animate({right: "320px"});
});

【讨论】：

但有点不同。
但我想通过任何点击移动例如 64px，直到到达灰线的末端。每当它到达终点线时，不要再向那一侧移动。
还在寻找这个解决方案吗？只需添加一点 if 语句，说： if( $(p).css("right") != "320px") { move animation } （这是我的头顶，我没有测试过