Постепенно меняющийся цвет - PullRequest
Новая
       7

Постепенно меняющийся цвет

2 голосов
/ 17 ноября 2009

Как логотип в верхнем левом углу экрана постепенно меняет цвет при наведении курсора? Я думаю, что это сделано в JQuery. Если вы не знаете код, можете ли вы указать мне учебник, который может? Спасибо.

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

UPDATE: Спасибо всем, я выложил рабочую версию кода ниже, 

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

Ответы [ 6 ]

9 голосов
/ 17 ноября 2009

Вы пытались посмотреть исходный код на страницу? Это изменение непрозрачности. 

// 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! //
1 голос
/ 17 ноября 2009

Установите синее изображение в качестве фона div. Добавьте красное изображение в div как обычное изображение, чтобы оно покрывало фоновое изображение. Вы можете поместить это в промежуток. При наведении курсора измените непрозрачность красного изображения так, чтобы синее изображение просвечивало. Это легко анимировать в jQuery. На mouseout, сделайте опосите.

0 голосов
/ 17 ноября 2009

Носредна правильно, но если вы хотите что-то более простое, вы можете использовать себя, не подвергаясь нападению за плагиат;

Сначала вам понадобится 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>

затем в теле вставьте изображение с правильным идентификатором 

<img src="mylogo.png" id="logo" width="100" height="100" />
0 голосов
/ 17 ноября 2009

Вероятно, два изображения, которые "исчезают" с непрозрачностью CSS. Когда один имеет максимальную непрозрачность, другой имеет минимум. Переход осуществляется путем увеличения одной непрозрачности и уменьшения другой

0 голосов
/ 17 ноября 2009

имеет два изображения логотипа. один синий один красный. красный отображается по умолчанию. изображение логотипа имеет родную область, а фоновое изображение - синий логотип. span имеет непрозрачность 0. Когда мышь над непрозрачностью диапазона постепенно изменяется на 1

0 голосов
/ 17 ноября 2009

Щелкните правой кнопкой мыши на странице и нажмите «Просмотр источника». Ваш ответ находится в блоке JavaScript в первых 40 строках файла. (Ваше предположение jQuery верно)

...