首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >谷歌主页使用的是什么技术(吉他弦乐)

谷歌主页使用的是什么技术(吉他弦乐)
EN

Stack Overflow用户
提问于 2011-06-09 20:49:54
回答 4查看 3.9K关注 0票数 11

the Google homepage使用了什么技术(2011年6月9日)?他们为陷阱制作了类似吉他拾音器的东西。当你把鼠标移到它上面的时候,陷阱就会被播放。

我知道它不是flash,否则Firefox的插件就会阻止它。

谢谢。

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2011-06-09 20:55:15

他们使用canvas

<canvas width="474" height="175"></canvas>

flash

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="0" height="0" id="guitar11-sound-player" type="application/x-shockwave-flash"><param name="movie" value="/logos/swf/guitar11.swf"><param name="allowScriptAccess" value="always"><object id="guitar11-sound-player-2" type="application/x-shockwave-flash" data="/logos/swf/guitar11.swf" width="0" height="0"><param name="allowScriptAccess" value="always"></object></object>

闪光灯是为声音准备的。

这是JavaScript

代码语言:javascript
复制
(function() {
    var g = null,
        h;
    try {
        if (!google.doodle) google.doodle = {};
        var i, m, n, o, r, s, t, u, v, aa, w, ba, ca, da = navigator.userAgent.indexOf("MSIE") >= 0,
            ea = [[3, "#776a62", "#2063ff", 2, [[28, 23], [103, 23]]], [5, "#776a62", "#f61b33", 2, [[28, 38], [103, 38]]], [0, "#776a62", "#ffdd24", 2, [[65, 67], [318, 67]]], [2, "#776a62", "#07d238", 2, [[28, 81], [281, 81]]], [7, "#776a62", "#2063ff", 1, [[28, 96.5], [281, 96.5]]], [9, "#776a62", "#f61b33", 1, [[29, 111.5], [104, 111.5]]], [1, "#776a62", "#07d238", 2, [[358, 66], [433, 66]]], [4, "#776a62", "#2063ff", 2, [[358, 81], [433, 81]]], [6, "#776a62", "#f61b33", 2, [[330, 96], [405, 96]]], [8, "#776a62", "#ffdd24", 1, [[358, 111.5], [434, 111.5]]]],
            fa = 0,
            ga = 0,
            x = 0,
            y = 0,
            z = !0,
            A = [],
            B = g,
            C = g,
            D = function(a) {
                a && a.parentNode && a.parentNode.removeChild(a)
            },
            E = function(a, b, c) {
                if (a) {
                    if (!google.doodle.ba) google.doodle.ba = [];
                    google.doodle.ba.push(arguments);
                    var d = a,
                        e = b,
                        f = c;
                    d.addEventListener ? d.addEventListener(e, f, !1) : d.attachEvent("on" + e, f)
                }
            },
            ... // A lot more [link](http://jsfiddle.net/2R4Cg/)

他们也有一些CSS

代码语言:javascript
复制
#hplogo:active,#hplogo:focus {
    outline:none;
}

#hplogo-g {
    background:url(logos/2011/guitar11-hp-sprite.png) no-repeat 0 0;
    height:175px;
    position:relative;
    width:474px;
}

#hplogo-click {
    background:url(logos/2011/guitar11-hp-sprite.png) no-repeat -2000px -2000px;
    cursor:pointer;
    height:130px;
    left:0;
    position:absolute;
    top:0;
    width:474px;
}

#hplogo-lcd {
    height:30px;
    left:70px;
    position:absolute;
    top:129px;
    width:200px;
}

#hplogo-lcd-icon {
    background:url(logos/2011/guitar11-hp-sprite.png) no-repeat -580px -162px;
    cursor:pointer;
    height:0;
    position:absolute;
    width:0;
}

#hplogo-lcd-text {
    background:transparent;
    border:0 none;
    color:#666;
    cursor:text;
    font-family:VT323,arial,sans-serif;
    font-size:14px;
    left:77px;
    position:absolute;
    top:134px;
    text-decoration:none;
    width:182px;
}

#hplogo-lcd-screen {
    background:url(logos/2011/guitar11-hp-sprite.png) no-repeat -2000px -2000px;
    height:20px;
    left:52px;
    position:absolute;
    top:134px;
    width:214px;
}

#hplogo-on {
    background:url(logos/2011/guitar11-hp-sprite.png) no-repeat -809px -39px;
    height:37px;
    left:272px;
    position:absolute;
    top:123px;
    width:62px;
}

#hplogo-led {
    background:url(logos/2011/guitar11-hp-sprite.png) no-repeat -2000px -2000px;
    height:21px;
    left:292px;
    position:absolute;
    top:133px;
    width:21px;
}

.hplogo-str {
    background:url(logos/2011/guitar11-hp-sprite.png) no-repeat -530px -60px;
    height:20px;
    position:absolute;
    width:255px;
}

#hplogot {
    -webkit-box-shadow:5px 5px 10px #ddd;
    -moz-box-shadow:5px 5px 10px #ddd;
    box-shadow:5px 5px 10px #ddd;
    -webkit-transition:opacity .5s ease-out;
    -moz-transition:opacity .5s ease-out;
    -o-transition:opacity .5s ease-out;
    transition:opacity .5s ease-out;
    -webkit-user-select:none;
    -moz-user-select:none;
    user-select:none;
    background-color:#ffffca;
    border:1px solid #b5b5b5;
    cursor:pointer;
    display:none;
    font:normal 9pt arial,sans-serif;
    left:128px;
    opacity:0;
    position:absolute;
    top:16px;
    white-space:nowrap;
    padding:2px 3px;
}

备注

代码语言:javascript
复制
#hplogo-click {
    background:url(logos/2011/guitar11-hp-sprite.png) no-repeat -2000px -2000px;
}

<div id="hplogo-click" onclick="google.doodle.go();"></div>,其中包含吉他的实际图像。

票数 12
EN

Stack Overflow用户

发布于 2011-06-09 20:55:02

这是HTML5 Canvas、SVG和JavaScript的组合。正如其他人所指出的那样,音频的Flash。

票数 3
EN

Stack Overflow用户

发布于 2011-06-09 20:56:08

可能是HTML5?如果你在Google Chrome中检查元素,就会有一个画布元素。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/6293016

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档