jquery鼠標滾動更改div位置

Question

如何使用鼠標滾動事件來控制div的位置？

我有12 li s，其中只有5個在任何時候都可見。滾動輪滾動時，我希望能夠顯示不同的li元素。如果可能的話，我想在圓形佈局中使用。

我不想滾動我的頁面，但像一個畫廊。如果你能想象我的所有li元素的照片，如果鼠標滾動的照片改變在水平方向上的位置，像http://viralpatel.net/blogs/demo/javascript-mouse-scroll-wheel-event.html

我需要用jQuery做到這一點和水平，不與垂直香草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列表項，當他們使用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 
});