Question

大家好，你能解决我的问题吗？我的页面中有一张地图列表。在每个页面中有40个不同的地图。因此，为了查看最后一张地图，我需要按住鼠标并向右水平滚动以查看此内容。但是如何使用向下/向上滚动鼠标来执行此操作？

我是jquery / javascript的初学者，这就是为什么我不知道如何做到这一点。

这是我的示例HTML代码。

<div id="horizontal">
<table border="1">
    <tr>
        <td>
            <img src="http://localhost/img1.jpg" height="300" widt="300" />
        </td>
        <td>
            <img src="http://localhost/img1.jpg" height="300" widt="300" />
        </td>
        <td>
            <img src="http://localhost/img1.jpg" height="300" widt="300" />
        </td>
        <td>
            <img src="http://localhost/img1.jpg" height="300" widt="300" />
        </td>
        <td>
            <img src="http://localhost/img1.jpg" height="300" widt="300" />
        </td>
        <td>
            <img src="http://localhost/img1.jpg" height="300" widt="300" />
        </td>
        <td>
            <img src="http://localhost/img1.jpg" height="300" widt="300" />
        </td>
        <td>
            <img src="http://localhost/img1.jpg" height="300" widt="300" />
        </td>
        <td>
            <img src="http://localhost/img1.jpg" height="300" widt="300" />
        </td>
        <td>
            <img src="http://localhost/img1.jpg" height="300" widt="300" />
        </td>
    </tr>
</table>
</div>
...
var $horizontal = $('#horizontal');

$(window).scroll(function () {
     //how to detect the scrolling of the mouse?
});

更多问题。我应该将div标签放在哪里水平？它在标签中吗？还是标签？好的就是这样。这是我的样本小提琴。 http://jsfiddle.net/rochellecanale/A3UHf/

Answer 1

你需要Brandon Aaron的jquery插件才能用鼠标滚轮触发水平滚动

<强> http://jsfiddle.net/A3UHf/5/

$("body").mousewheel(function(event, delta) {
    this.scrollLeft -= (delta * 30);
    event.preventDefault();
});

Answer 2

您可以使用mousewheel plugin。使用鼠标滚轮水平滚动应该使用此代码：

$("body").mousewheel(function(event, delta) {

    this.scrollLeft -= (delta * 30);

    event.preventDefault();

});

滚动鼠标时如何水平移动页面？

2 个答案: