javascript - Dropbox 是如何创建他们的 Javascript 翻转效果的？

Question

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。非常感谢。

Answer 1

它们有一个 ID 为“play_link”的锚元素，以及其中的圆形图标图像。该元素的不透明度最初为 0.5（如果 IE，则为 50）。当 JavaScript 'mouseover' 事件触发时，它们会将不透明度设置为 1（或 IE 中的 100）。当 'mouseout' 事件触发时，它们会将不透明度设置回原来的状态。您可以使用几乎任何 JavaScript 框架来实现动画。

Answer 2

他们正在使用script.aculo.us。浏览Effect.Opacity的文档，您将很快了解如何在您自己的网站上复制此行为。