GOOGLE 20120409 主页特效 <Doodle 跑马灯源码>-优快云博客

今日Google Doodle纪念埃德沃德·迈布里奇，一位利用多相机捕捉动态影像的先驱。此篇博客分享了实现Doodle动画效果的HTML与JavaScript代码，通过调整背景图片位置模拟跑马灯效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天Google的Doodle是纪念埃德沃德·迈布里奇

埃德沃德·迈布里奇（Eadweard J. Muybridge，1830年4月9日－1904年5月8日），英国摄影师，他因使用多个相机拍摄运动的物体而著名，他发明的“动物实验镜”（Zoopraxiscope）是一种可以播放运动图像的投影机，将连续图像绘制在一块玻璃圆盘的边缘，随着玻璃的旋转，将影像投射出去，这样就使这些影象显得像在运动。

效果如下,代码页面

 
        <
        html
        > 
       
        <
        head
        > 
       
        <
        meta
        charset
        =
        "utf-8"
        /> 
       
        <
        title
        >Google Doodle跑马灯 代码</
        title
        > 
       
        </
        head
        > 
       
        <
        body
        > 
       
        <
        div
        id
        =
        "hplogo"
        role
        =
        "button"
        title
        =
        "英国实验摄影师 埃德沃德·迈布里奇 182 周年诞辰" 
         style
        =
        "background:url(http://www.google.com.hk/logos/2012/muybridge12-hp-f.jpg);cursor:pointer;height:162px;position:relative;width:469px;"
        > 
       
        <
        div
        id
        =
        "hplogo-p"
        style
        =
        "background:url(http://www.google.com.hk/logos/2012/muybridge12-hp-p.jpg) 0 0 no-repeat;height:54px;left:201px;position:absolute;top:54px;width:67px"
        ></
        div
        > 
       
        <
        div
        id
        =
        "hplogo-v"
        style
        =
        "background:url(http://www.google.com.hk/logos/2012/muybridge12-hp-v.png);height:162px;left:0;position:absolute;top:0;width:469px"
        ></
        div
        > 
       
        </
        div
        > 
       
        </
        body
        > 
       
        </
        html
        > 
       
        <
        script
        type
        =
        "text/javascript"
        > 
       
        (function() { 
       
        try { 
       
        window.google || (window.google = {}); 
       
        google.doodle || (google.doodle = {}); 
       
        var a, b, c, e, f, g = !1; 
       
        eval("google.doodle.mod=function(a,n){return a" + String.fromCharCode(37) + "n;}"); 
       
        var h = google.doodle.mod, 
       
        i = function() { 
       
        g = false; 
       
        window.clearTimeout(google.doodle.a); 
       
        google.doodle.a = null 
       
        }, 
       
        j = function() { 
       
        if (!google.doodle.g && google.dstr && google.rein) { 
       
        google.doodle.g = true; 
       
        google.dstr.push(i); 
       
        google.rein.push(j) 
       
        } 
       
        i(); 
       
        google.doodle.cpDestroy = i; 
       
        google.doodle.cpInit = j; 
       
        a = document.getElementById("hplogo"); 
       
        b = document.getElementById("hplogo-p"); 
       
        if (a && b) { 
       
        a.onclick = function() { 
       
        if (google.doodle.a) { 
       
        i(); 
       
        google.nav && google.nav.go ? google.nav.go("http://www.google.com.hksearch?q=%E5%9F%83%E5%BE%B7%E6%B2%83%E5%BE%B7%C2%B7%E8%BF%88%E5%B8%83%E9%87%8C%E5%A5%87&ct=muybridge12-hp&oi=ddle&hl=zh-CN") : window.location.href = "/search?q=%E5%9F%83%E5%BE%B7%E6%B2%83%E5%BE%B7%C2%B7%E8%BF%88%E5%B8%83%E9%87%8C%E5%A5%87&ct=muybridge12-hp&oi=ddle&hl=zh-CN" 
       
        } else k() 
       
        }; 
       
        a.onmousedown = function() { 
       
        b.style.marginTop = "2px" 
       
        }; 
       
        a.onmouseout = a.onmouseup = function() { 
       
        b.style.marginTop = "" 
       
        }; 
       
        g = true; 
       
        e = c = 0; 
       
        f = 1; 
       
        if (google.browser && google.browser.engine.IE && google.browser.compareVersions("7", google.browser.engine.version) > 0) { 
       
        var d = document.getElementById("hplogo-v"); 
       
        d.style.background = ""; 
       
        d.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.google.com.hklogos/2012/muybridge12-hp-v.png')"; 
       
        try { 
       
        document.execCommand("BackgroundImageCache", false, true) 
       
        } catch(m) {} 
       
        } 
       
        } 
       
        }, 
       
        k = function() { 
       
        var d = h(c, 67); 
       
        if (f < 
        63
        )
        f
        = f * 1.05; 
       
        else if (d > 0 && d < 
        4
        ) { 
       
        f
        =
        67
        ; 
       
        c
        = c - d 
       
        } 
       
        c
        =
        h
        (c + f, 804); 
       
        a.style.backgroundPosition = -c + "px 0"; 
       
        if (e < 67) { 
       
        e
        = e + f; 
       
        b.style.backgroundPosition
        = a.style.backgroundPosition 
       
        } 
       
        if (g) 
        google.doodle.a
        =
        window
        .setTimeout(k, 41) 
       
        }; 
       
        google.x ? google.x({ 
       
        id: "DOODLE" 
       
        }, 
       
        j) : j() 
       
        } catch(l) { 
       
        google.ml(l, !1, { 
       
        cause: "DOODLE" 
       
        }) 
       
        }; 
       
        })(); 
       
        </script>