Question

我正在尝试创建一个带有块的照片库，用于下面的描述。我还想有两个按钮，一个在照片的两边。当您将鼠标悬停在这些按钮（可能是箭头）上时，我希望包含照片的div可以向右或向左滚动（或显示为滚动）。我已经研究了几个JSFiddles，但它们都没有完全符合我的要求。 This one接近，但我想让它向左和向右滚动，而不是向上和向下滚动。我用我的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

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

2 个答案: