2

画面の左上隅にあるロゴの色が、ロールオーバーによって徐々に変化するのはどのような仕組みですか? jqueryでできていると思います。コードがわからない場合は、できるチュートリアルを教えてもらえますか? ありがとう。

http://www.shopdev.co.uk/blog/

更新: 皆さん、ありがとうございます。以下のコードの動作バージョンを投稿しました。

<html>

    <head>            

        <script type="text/javascript" src="jquery.js"></script>

        <script type="text/javascript">

            $(document).ready(function(){

                // load the logo transition
                $("#logo span").css("opacity","0");
                $("#logo span").css("display","block");
                // logo animation
                $("#logo").hover(function() {
                    $("#logo span").stop().animate({opacity:1},'slow');
                }, function() {
                    $("#logo span").stop().animate({opacity:0},'slow');
                });


            });

        </script>

        <style type="text/css">
            #logo span{
                background: url(logo2.gif) no-repeat scroll center bottom;
                width:257px;
                height:75px;
                position:absolute;
            }
            img{
                border:0;
            }
        </style>

    </head>

    <body>

        <div id="logo"><a href="#"><span></span><img src="logo.gif"/></a></div>

    </body>

</html>
4

6 に答える 6

9

ページのソースコードを見てみましたか? 不透明度の変更です。

// load the logo transition
$("#logo span").css("opacity","0");
$("#logo span").css("display","block");
// logo animation
$("#logo").hover(function() {
    $("#logo span").stop().animate({opacity:1},'slow');
}, function() {
    $("#logo span").stop().animate({opacity:0},'slow');
});

つまり、前面の画像が徐々にフェードインおよびフェードアウトする別の画像の上にある画像です。色の変化ではありません。

コードの上の警告に注意してください。

// whoah there...  This source code is copyright ShopDev.  By all means, use this website as a source of inspiration - just don't plagiarize! //
于 2009-11-17T17:22:01.853 に答える
1

青色の画像を div の背景として設定します。背景画像を覆うように、通常の画像として div に赤い画像を追加します。スパンに配置できます。カーソルを合わせると、赤い画像の不透明度を変更して、青い画像が透けて見えるようにします。これは jQuery で簡単にアニメーション化できます。マウスアウトでは、反対のことを行います。

于 2009-11-17T17:23:43.933 に答える
0

Nosrednaは正しいですが、剽窃の攻撃を受けずに自分で使用できる、より単純なものが必要な場合。

最初に、24 ビットの PNG または透明な部分を持つ gif 画像が必要です。この例では、透明な液体が使用されています。

jquery、jquery-ui (CSS 背景色アニメーションを追加するため)、および画像のホバー効果が含まれていることを確認してください。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(function(){

        $("#logo")
            .css({"backgroundColor: "#fff"})
            .hover(function() {
               $(this).stop().animate({backgroundColor: "#f00"}, 'slow');
            }, function() {
               $(this).stop().animate({backgroundColor: "#fff"}, 'slow');
            });

    });
</script>

次に、正しいIDを使用して画像を本文にドロップします

<img src="mylogo.png" id="logo" width="100" height="100" />
于 2009-11-17T17:53:08.717 に答える
0

ページを右クリックして、[ソースの表示] をクリックします。あなたの答えは、ファイルの最初の 40 行の JavaScript ブロックにあります。（あなたのjQueryの仮定は正しいです）

于 2009-11-17T17:22:03.257 に答える
0

2 つのロゴ画像があります。青1つ赤1つ。赤はデフォルトで表示されます。ロゴ イメージには兄弟スパンがあり、その背景イメージは青いロゴです。スパンの不透明度は 0 です。スパンの不透明度の上にマウスを置くと、徐々に 1 に変わります。

于 2009-11-17T17:22:25.527 に答える
0

おそらく 2 つの画像は、CSS の不透明度で「色あせ」ています。一方が最大の不透明度の場合、もう一方は最小になります。トランジションは、1 つの不透明度を上げて別の不透明度を下げます。

于 2009-11-17T17:24:33.527 に答える