0

ライブデモ
スクリーンショット

コンセプトの必要性は…
サムネイルがあります。
サムネイルは黒いオーバーレイで覆われたままです)。
特定の画像にマウスを合わせると、ライトアップされます（または、反転または回転のアニメーションがおまけになります...笑）
クリックすると、画像はfancyboxを介して実際の寸法に拡大されます。

ファンシーボックススクリプトを微調整しましたが、ファンシーボックス機能はすでに発生しています。

$(".fancybox").fancybox({
    padding : 0,
    openEffect: 'elastic',
    openSpeed: 250,

   closeEffect: 'elastic',
   closeSpeed: 450,
   closeClick: false,

    helpers : {
    overlay : {
        css : {
            'background' : 'rgba(0, 0, 0, 0.9)'
        }
    }
}

});

作業コード
ホバー機能 (またはアニメーション) の既存のコードを変更するには、いくつかの助けが必要です (^_^)
乾杯!!

4

1 に答える 1

1

ホバー時にアニメーションを取得する方法の簡単なサンプル: 

$(".fancybox").on("mouseenter", function() {
    $(this).find("img").stop(true, true).animate({
        "opacity": 0.1
    }, "slow");

}).on("mouseleave", function() {
    $(this).find("img").stop(true, true).animate({
        "opacity": 1
    }, "slow");

}).fancybox({
    padding: 0,
    openEffect: 'elastic',
    openSpeed: 250,

    closeEffect: 'elastic',
    closeSpeed: 450,
    closeClick: false,

    helpers: {
        overlay: {
            css: {
                'background': 'rgba(0, 0, 0, 0.9)'
            }
        }
    }

});​

作業コードの更新

これが、必要な効果を作成するために必要な基本構造です。

... or an animation of flip or rotation would be a bonus

... $$$ ボーナスのことですか？;)

于 2013-01-04T02:45:36.397 に答える