jquery鼠标滚动改变div位置

Question

如何使用鼠标滚动事件来控制div 的位置？

我有 12 个lis，其中只有 5 个在任何时候都可见。我希望能够在滚轮滚动时显示不同的 li 元素。如果可能的话，我希望采用圆形布局。

我不想滚动我的页面，而是像画廊一样。如果你把我所有的li 元素想象成照片，如果鼠标滚动，照片会在水平方向改变位置，就像http://viralpatel.net/blogs/demo/javascript-mouse-scroll-wheel-event.html

我需要在水平方向使用 jQuery，而不是在垂直方向使用 vanilla JS。是否有插件或一些工作代码？

fiddle

<script src="jquery.js"></script>

<script>
    $(document).ready(function() {
       //jQuery code
    });
</script>

<style>
    * { padding: 0; margin: 0; }
    div, ul { height: 100px; width: 500px; display: block; overflow: hidden; }
    div { position: relative; }
    ul { position: absolute; }
    li { float: left; height: 98px; width: 98px; display: block; list-style: none; border: 1px solid #aaa; }
</style>

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
    </ul>
</div>

Answer 1

我在弄清楚您真正要查找的内容时遇到了一些麻烦。如果你想要 jQuery 工具来帮助滚动，你可以使用这些：

http://api.jquery.com/scroll/ - 将事件处理程序绑定到“滚动”JavaScript 事件，或在元素上触发该事件。

http://api.jquery.com/scrollTop/ - 获取匹配元素集中第一个元素的滚动条的当前垂直位置。

您可以使用这些方法在滚动期间控制元素的位置。

<div id="myDiv" style="position: absolute" />

$(window).scroll(function() {
    $('#myDiv').css('top', $(window).scrollTop() + 'px')
});

但是，您的问题的一部分听起来像是您想要显示 5 个列表项，并且当它们滚动时使用 AJAX 再显示 5 个（“如果可能，我想要一个圆形显示。”）。这类似于 Twitter 和其他网站使用的“无限滚动”概念。有很多插件，其中一个可以找到here。

编辑：

使用 Brandon Aaron 的 jQuery mousewheel plugin，您可以执行以下操作：

CSS：

*{padding:0;margin:0;}
div { height:120px; width:500px; display:block; overflow:auto; }
ul { width: 9999px; }
li { float:left; height:98px; width:98px; display:block; list-style:none; border:1px solid #aaa;}

Javascript：

$('div').mousewheel(function(event, delta) {
  this.scrollLeft -= (delta * 30);
  event.preventDefault();  // Prevent the window from scrolling
});