2

屏幕左上角的logo是如何随着翻车而逐渐变色的？我认为它是在 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

右键单击页面并点击“查看源代码”。您的答案在文件前 40 行的 JavaScript 块中。（您的 jQuery 假设是正确的）

于 2009-11-17T17:22:03.257 回答
0

它有两个标志图像。一蓝一红。默认显示红色。徽标图像具有兄弟跨度，其背景图像是蓝色徽标。span 的不透明度为 0。当鼠标悬停在 span 上时，不透明度逐渐变为 1

于 2009-11-17T17:22:25.527 回答
0

可能是两个使用 css 不透明度“褪色”的图像。当一个是最大的不透明度时，另一个是最小的。过渡使我增加一种不透明度并降低另一种

于 2009-11-17T17:24:33.527 回答
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 回答