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

他们有一个名为'play_link'的锚元素，以及其中的圆圈图标图像。该元素的不透明度最初为0.5（如果IE，则为50）。当“鼠标悬停”事件触发时，它们会将不透明度设置为1（或IE中为100）。当'mouseout'事件触发时，它们会将不透明度设置为以前的状态。几乎任何JavaScript框架都可以实现动画。

Answer 2

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

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

2 个答案: