Question

屏幕左上角的徽标如何逐渐改变颜色作为翻转？我认为它是在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>

Answer 1

您是否尝试查看该页面的源代码？这是一个不透明的变化。

// 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! //

Answer 2

将蓝色图像设置为div的背景。将div中的红色图像添加为普通图像，使其覆盖背景图像。你可以把它放在一个范围内。在悬停时，您可以更改红色图像的不透明度，以便显示蓝色图像。这很容易在jQuery中动画。在mouseout上，做oposite。

Answer 3

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

Answer 4

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

时

Answer 5

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

Answer 6

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" />

渐渐变色

6 个答案: