【问题标题】:How to scroll with jquery animate如何使用 jquery animate 滚动
【发布时间】:2018-05-10 10:27:30
【问题描述】:

我正在尝试让一些按钮在这里工作。 http://www.sepulturaimpex.ro/portofoliu 是网站。

当我点击左/右按钮时,我想准确地从一个项目移动到另一个项目

图片的宽度是随机的。

我怎样才能做到这一点?

这是我正在使用的脚本。

$(document).ready(function () {
    $(".prev").click(function () {
        $(".p_horizontal_wrap").animate({
            scrollLeft: "-=700"
        })
    }), $(".next").click(function () {
        $(".p_horizontal_wrap").animate({
            scrollLeft: "+=700"
        })
    })
}),

【问题讨论】:

标签: javascript jquery html scroll jquery-animate


【解决方案1】:

答案就在你的问题中;如果图像的宽度是随机的,那么您不能滚动 w/ 固定宽度

我认为最好的办法是向前看并找到下一个对象的 x 位置,然后滚动到该位置。根据您的标记,您可能需要跟踪滚动到视图中的对象索引。

您的下一个按钮(和您的下一个/上一个可能相同)如下所示:

$(".next").click(function() {
    var targ = /** find out the next item to be shown **/
    var left = $(targ).position().left;
    $(".p_horizontal_wrap").animate({
        scrollLeft: left
    });
});

【讨论】:

  • 如果我将 sepulturaimpex.ro/portofoliu-constructii-civile 中的所有图像制作成固定宽度 - 比如说 800px;我必须在脚本中更改什么?非常感谢您的回答
  • 您仍然会遇到滚动问题。即使您设置为 800 像素;我想您正在使这些图像具有响应性,以便它们在移动设备、平板电脑、桌面视口上适当显示;所以,你仍然想知道每个元素的水平 x 位置。在手机上,你的下一张图片可能从 321px 开始,在桌面上,它可能是 801px。
  • 嗨。我找到了另一个我可以使用的画廊.. 但我在 google chrome 上遇到问题..is 没有将正面图像居中.. 这是网站sepulturaimpex.ro/portofoliu-constructii-metalice你能帮忙吗?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-03-17
  • 1970-01-01
  • 1970-01-01
  • 2015-05-25
  • 2012-10-24
相关资源
最近更新 更多