jquery - 带有定义列表项的上移列表

Question

最近克里斯 posted an awesome jQuery code在他的 Css-Tricks 博客上，允许列表通过鼠标移动上下滚动。不过，他将其用于无序列表项。

我很想在我当前的客户项目中使用它，但我不知道如何在 <dt> 上使用它元素

HTML 是这样的:

<dl>

            <dt><a href="#">Example.net</a></dt>
            <dd>
              1 dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
            </dd>

            <dt><a href="#">Example2.net</a></dt>
            <dd>
              2 dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
            </dd>

            <dt><a href="#">Example3.net</a></dt>
            <dd>
              3 dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
            </dd>

            <dt><a href="#">Example4.net</a></dt>
            <dd>
              4 dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
            </dd>
</dl>

<dd>不低于<dt>项目，它在 jQuery 放置的另一个 div 中，所以 <dt>项目只是排列成链接。

我还为滚动条使用了 jQuery 插件 TinyScroll，它设置了 overflow: autoflow;管他呢。所以这可能是它对我不起作用的原因。

但这是博文中的 Chris 代码:

$("#menu").css("overflow", "hidden").wrapInner("<div id='mover' />");

var $el,
    speed = 13.5,    // needs to be manually tinkered with
    items = $("#menu a");

items
.each(function(i) {
        $(this).attr("data-pos", i);
})
.hover(function() {

        $el = $(this);
        $el.addClass("hover");  

        $("#mover").css("top", -($el.data("pos") * speed - 40));
        // 40 is the top padding for the fadeout

}, function() {
        $(this).removeClass("hover");
});

我需要更改什么才能让它为我工作？

Answer 1

http://jsfiddle.net/9uySK/检查这个实现。

您可能错过了一些事情 - #mover 元素上的绝对位置是一回事...但是哦，好吧 - 检查 jsFiddle 解决方案，如果您有任何问题，请告诉我并在评论中提出。

希望对你有帮助

汤姆

附言。还要检查对 CSS 的添加