如何創建懸停的div內容的jquery垂直滾動？

Question

如何在懸停時創建jquery驅動的div內容的垂直滾動，而不是點擊？

看看這個example。試着將旗幟下的右欄懸停。它將開始以鼠標懸停的方式滾動內容。

我不知道如何做到這一點。

Answer 1

我們不能確切地只是給你你的答案，但作爲暗示，你將不得不使用mousemove事件，並檢測面板內的鼠標在哪裏。設置overflow: hidden;並將相對速度移到鼠標靠近邊緣的位置。我建議使用兩個div - 一個外部div來設置邊界（在此div上檢測mousemove），然後另一個絕對定位。

這將是這樣的：

HTML：

<div id='outer'> 
    <div id='inner'> 
     <p>Overflowing content here</p> 
    </div> 
</div> 

CSS：

#outer { 
    height: 200px; 
    width: 150px; 
    position: relative; 
} 

#inner { 
    position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; 
} 

的jQuery：

$(document).ready(function() { 
    $("#outer").mousemove(function(e) { 
     //Refer to [here][1] to get position of mouse within element. 
     //Get position of mouse within the element, if it is at the top then compare how close it is to 0, if it is at the bottom then compare how close it is to 200px (or whatever you set as the height of the outer container). Slide inner container as appropriate. 
    }); 
}); 

Answer 2

看看這個我有固定別人的代碼：http://jsfiddle.net/n3Q9j/5/