如何在悬停时创建div内容的jquery垂直滚动? [英] How do I create a jquery vertical scroll of div contents on hover?

问题描述

如何在悬停而不是单击时创建由jQuery驱动的div内容垂直滚动?

How do I create a jquery-powered vertical scroll of div contents on hover, not on click?

查看此示例.尝试将鼠标悬停在标志下.它将开始以鼠标悬停的方式滚动内容.

Check out this example. Try hovering the rightbar under the flags. It will start scrolling the content the way your mouse hovers.

我不确定该怎么做.

推荐答案

我们不能完全给您这个问题的答案，但提示您必须使用mousemove事件并检测鼠标在面板中的位置.设置overflow: hidden;并将相对速度移动到鼠标与边缘的距离.我建议使用两个div-一个外部div设置边界(在此div上检测mousemove)，然后另一个绝对定位.

We can't exactly just give you the answer to this, but as a hint you would have to use the mousemove event and detect where, within the panel, the mouse is. Set overflow: hidden; and move a relative speed to how close the mouse is to the edge. I'd recommend using two divs - one outer div to set the boundaries (detect mousemove on this div) and then the other one absolutely positioned.

会是这样的:

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

这篇关于如何在悬停时创建div内容的jquery垂直滚动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！