Question

我正在尝试使用HTML和JavaScript设置网站，一次显示图像的各个部分，通过单击图像的按钮或部分，将滚动到图像的不同部分。

| ----- | | ----- | | ----- |
| --A- | | --B- | | --C- |
| ----- | | ----- | | ----- |

如果图像是由A，B和C的串联形成的，我想一次只显示一个部分，AB或C，并通过单击按钮，滚动显示左边的那个或者对。因此，如果显示B，我单击B内的按钮，我希望浏览器向右滚动，显示C。

我想我可以通过将三个图像彼此相邻，相距足够远，一个到另一个不会显示，并使用javascript来隐藏滚动按钮，然后使用javascript滚动到html锚点，指定图像的位置。

但是，我无法将图像移到屏幕外。如果我的小方案要工作，我需要在屏幕左侧放置A屏幕，在屏幕右侧放置C.我怎么能通过HTML做到这一点？我可以通过HTML执行此操作吗？有没有更好的方法来获得我想要的功能？

谢谢！

Answer 1

对于使用锚点的纯HTML + CSS，这可能是可能的，但更强大的方法是在内部注入一些JavaScript。我认为你试图让视觉上具有吸引力，所以有一些动画可能也不会受到伤害。

您无需将图像放在屏幕上。将overflow设置为hidden的div可以正常运行。只需创建一个与您的某个细分一样宽的div。然后你只需要为内部图像的边缘设置动画。如果您了解jQuery，这可能会有所帮助：

<强> CSS

div {
    width: 300px;
    heigth: 500px;
    overflow: hidden;
}

<强> HTML

#images div的图像包含图像A，B和C.

<div id="images">
    <img src="abc.jpg" width="900" height="500" />
</div>

<强>的jQuery

$('div#images img').click(function() {
    var marginLeft = parseInt($(this).css('margin-left'));
    var newMarginLeft = marginLeft - 300;
    if(newMarginLeft >= $(this).width()) {
        newMarginLeft = 0;
    } 

    $(this).animate({
        marginLeft: newMarginLeft
    }, 500);
    return false;
});

希望这会有所帮助。请注意，您没有拥有将它们全部放到一个图像上，这只是一种方法。你可能还有一个内部div和图像分别在那里你可以动画那个内部div。这取决于你。

以编程方式滚动网站中的图像

1 个答案: