Question

the Google homepage（2011年6月9日）使用了哪些技术？他们为陷阱制作了类似吉他拾音器的东西。当您将鼠标移到它上面时，正在播放陷阱。 enter image description here

我知道它不是闪存，否则Firefox的附加组件会阻止它。

感谢。

Answer 1

他们使用canvas

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

闪光灯用于声音。

以下是 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 ：

#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;
}

请注意

#hplogo-click {
    background:url(logos/2011/guitar11-hp-sprite.png) no-repeat -2000px -2000px;
}

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

Answer 2

这是HTML5 Canvas，SVG和JavaScript的组合。正如其他人所说，Flash是音频。

Answer 3

可能是HTML5？如果您在Google Chrome中检查元素，则会有一个canvas元素。

Answer 4

http://googleblog.blogspot.com/2011/06/doodle-for-instrumental-inventor.html

“如果你很好奇，涂鸦是用JavaScript，HTML5 Canvas（用于现代浏览器绘制吉他弦），CSS，Flash（用于声音）和Google Font API等工具组合而成的。 .gl和App Engine。“

Google主页使用了哪些技术（吉他弦）

4 个答案: