Question

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

我有12 li个，其中只有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/ - 将事件处理程序绑定到“scroll”JavaScript事件，或在元素上触发该事件。

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

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

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

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

然而，你问题的一部分听起来好像你想要显示5个列表项，当它们滚动显示另外5个使用AJAX时（“如果可能的话，我想要一个圆圈秀。”）。这类似于Twitter和其他网站使用的“无限滚动”概念。有一堆插件，其中一个可以找到here。

编辑：

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

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
});

jquery鼠标滚动改变div位置

1 个答案: