0

http://www.deviantart.com/当您将光标移到其中一个容器上时，它会垂直向上滚动其中一个容器的内容。在mouseleave上，它会向下滚动。

你可以在他们的主页上看到它——至少现在是这样——在一个带有“项目赠品：100 点赠品#4”文本的容器中。我想知道他们是怎么做到的？

通过 firebug 找到这行代码：
onmouseout="if (window.LitBox) LitBox.out(this)" onmouseover="if (window.LitBox) LitBox.hover(this, true)".
所以我试着用谷歌搜索“LitBox”——但没有得到任何运气。我发现的只是灯箱和列表框......

确切的效果是我正在寻找的。

有谁知道怎么做？

4

2 回答 2

1 
    $(document).ready(function () {

    if ($('.content').height() > $('.container').height()) {
        $(".content").hover(function () {
            animateContent("down");
        }, function () {
            animateContent("up");
        });
    }
});

    function animateContent(direction) {
        var animationOffset = $('.container').height() - $('.content').height();
        var speed = "slow";
        if (direction == 'up') {
            animationOffset = 0;
            speed = "fast";
        }
        $('.content').animate({
            "marginTop": animationOffset + "px"
        }, speed);
    }

在 JSFiddle 中查看

我的代码基于此代码:)

于 2013-09-29T03:04:35.643 回答
0

嗯.. 用 jquery 或 css3 实现并不难。使用 jquery，在鼠标悬停时，您开始运行一个函数来向上滚动 div，也许使用 animate()。然后在 mouseleave 上停止动画并运行另一个动画以将其向后滚动。

使用 css 3，您可以通过转换来实现它。您可以查看http://www.w3schools.com/css3/css3_transitions.asp。

于 2013-09-29T02:41:25.773 回答