Как Dropbox создал свой эффект ролловера Javascript? - PullRequest
Новая
       15

Как Dropbox создал свой эффект ролловера Javascript?

0 голосов
/ 23 сентября 2010

https://www.dropbox.com/ - их кнопка воспроизведения, как они создают этот эффект?Из того, что я вижу, они используют: 

<script type="text/javascript" charset="utf-8">
    document.observe("dom:loaded", function () { 

        var play_link = $("playvideo");

        play_link.observe("mouseover", function () {
            new Effect.Opacity(play_link.down("img"), { duration: 0.2, to: 1.0 });
        });

        play_link.observe("mouseout", function () {
            new Effect.Opacity(play_link.down("img"), { duration: 0.2,  to: 0.5 });
        })


        if (!FlashDetect.versionAtLeast(9)) {
            $("has_flash").hide();
            $("no_flash").show();
        }
    });

    function play_screencast() {
        Home.showScreencast('commoncraft', true);
    }
</script>

Но не уверены, как создать этот эффект на нашем сайте.Я использую .NET.Большое спасибо.

Ответы [ 2 ]

0 голосов
/ 23 сентября 2010

Они используют script.aculo.us .Просмотрите документы на Effect.Opacity , и вы быстро поймете, как продублировать это поведение на вашем собственном сайте.

0 голосов
/ 23 сентября 2010

У них есть элемент привязки с идентификатором 'play_link' и изображение значка круга внутри него. Непрозрачность этого элемента изначально равна 0,5 (или 50, если IE). Когда происходит событие JavaScript «mouseover», они изменяют непрозрачность до 1 (или 100 в IE). Когда происходит событие «mouseout», они возвращают непрозрачность тому, что было раньше. Вы можете добиться анимации практически с любым фреймворком JavaScript.

...