0

http://www.deviantart.com/は、カーソルをその上に移動すると、コンテナーの 1 つのコンテンツを上方向に垂直にスクロールします。マウスを離すと、下にスクロールします。

彼らのメイン ページで実際に動作しているのを見ることができます。少なくとも現時点では、「プロジェクト ギブアウェイ: 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 では、マウスオーバー時に、おそらく animate() を使用して、div を上にスクロールする関数の実行を開始します。次に、mouseleave でアニメーションを停止し、別のアニメーションを実行してスクロール バックします。

CSS 3 では、トランジションで実現できます。http://www.w3schools.com/css3/css3_transitions.aspを確認できます。

于 2013-09-29T02:41:25.773 に答える