如何创建悬停的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/