javascript - 如何使用 Javascript 或 CSS 悬停按钮并使 div 向右或向左滚动？

Question

我正在尝试为下面的描述创建一个带有块的照片库。我还想要两个按钮，一个在照片的两侧。当您将鼠标悬停在这些按钮（可能是箭头）上时，我希望包含照片的 div 向右或向左滚动（或看起来滚动）。我研究了一些 JSFiddles，但没有一个完全符合我的要求。这个接近了，但我希望它左右滚动，而不是上下滚动。我用我的 div 尝试了代码，但它没有做任何事情。这是我正在使用的页面：

[网站已不存在]

提前致谢！

var amount = '';

function scroll() {
    $('#container').animate({
        scrollTop: amount
    }, 100, 'linear',function() {
        if (amount != '') {
            scroll();
        }
    });
}
$('#hover').hover(function() {
    amount = '+=10';
    scroll();
}, function() {
    amount = '';
});
$('#hover2').hover(function() {
    amount = '-=10';
    scroll();
}, function() {
    amount = '';
});

Answer 1

在滚动功能中，您要设置“scrollLeft”

我创建了一个小提琴，我认为它可以满足您的需求。我已将文本放入另一个 div 中，这样它就不会自动换行到其主容器的宽度。

function scroll() {
    $('#container').animate({
        scrollLeft: amount
    }, 100, 'linear',function() {
        if (amount != '') {
            scroll();
        }
    });
}

jsFiddle

Answer 2

你必须改变

 $('#container').animate({
    scrollUp: amount
}, 100, 'linear',function() {
    if (amount != '') {
        scroll();
    }
});

至

 $('#container').animate({
    scrollLeft: amount
}, 100, 'linear',function() {
    if (amount != '') {
        scroll();
    }
});

JSFiddle