Question

当您将光标移到其上时，

http://www.deviantart.com/会向上滚动其中一个容器的内容。在mouseleave上，它向下滚动。

你可以在他们的主页上看到它 - 至少现在 - 在一个容器中，文本为“Project Giveaway：100 point giveaway＃4”。我想他们是怎么做到的？

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

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

任何人都知道怎么做？

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

See in JSFiddle

my code based on this code :)

Answer 2

嗯..使用jquery或css3实现起来并不困难。使用jquery，在mouseover上你可以使用animate（）开始运行一个函数来向上滚动div。然后在mouseleave上停止动画并运行另一个动画以将其向后滚动。

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

鼠标移动时的垂直自动滚动 - 例如deviantart.com“Project giveaway”具有

2 个答案: