自己模拟实现一下Google的赛马Doodle

今天的Google Doodle是个动态的，是一个骑马的动态Doodle，是谷歌纪念英国实验摄影师埃德沃德·迈布里奇182周年诞辰，埃德沃德·迈布里奇是运动摄影的开创者，所以谷歌涂鸦以一个运动的摄影作为背景创作的。

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

我对这个doodle的实现比较感兴趣，下面做个实现小程序。只用一幅图的时候效果是这样的（稍等下，运动缓冲）：

.classicScrollBox{width:9000px; height:54px; position:absolute; left:0; }
.classicScrollBox img{width:804px; height:54px; float:left;}
.item1{width:804px; height:54px; overflow:hidden; position:relative;}
.post_content div { margin:0 !important; }
.post_content div img { max-width: 900px !important;}











当两幅图同时使用的使用，就可以达到连贯的赛马效果了。

var scrollBox = document.getElementById("classicScrollBox");
var btn_1 = document.getElementById("btn_1");
btn_1.onclick = function(){
//alert("11");
scrollBox.innerHTML = '



';
}
var btn_2 = document.getElementById("btn_2");
btn_2.onclick = function(){
//alert("11");
scrollBox.innerHTML = '

';
}
var scrollBox = document.getElementById("classicScrollBox"); var num_record = 0;//起止位置计算 var num_motion = 1000;//动画执行间隔 var num_motionTime = 5;//动画缓动系数 window.onload = function(){ function scrolls(){ scrollBox.style.left = (parseInt(scrollBox.style.left)-67) +'px'; num_record += 67; if(num_record == 804){ scrollBox.style.left = 0 + 'px'; num_record = 0; } num_motionTime = Math.ceil(num_motion/100); if (num_motionTime == 0) { num_motionTime = 1; } if (num_motion != 40) { num_motion -= 10*num_motionTime; } setTimeout(scrolls,num_motion); } setTimeout(scrolls,num_motion); }
测试代码如下

var scrollBox = document.getElementById("classicScrollBox");
    var num_record = 0;//起止位置计算
    var num_motion = 1000;//动画执行间隔
    var num_motionTime = 5;//动画缓动系数
    window.onload = function(){
        function scrolls(){
            scrollBox.style.left = (parseInt(scrollBox.style.left)-67) +'px';
            num_record += 67;
            if(num_record == 804){
                scrollBox.style.left = 0 + 'px';
                num_record = 0;
            }
            num_motionTime = Math.ceil(num_motion/100);
            if (num_motionTime == 0) {
                num_motionTime = 1;
            }
            if (num_motion != 40) {
                num_motion -= 10*num_motionTime;
            }
            setTimeout(scrolls,num_motion);
        }
        setTimeout(scrolls,num_motion);
    }

这次的代码不是很复杂，主要是使用css的背景属性，使用JavaScript计时器来改变时间，调整图片背景的位置达到动画效果。

完整的doodle演示：





(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("/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") : 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='/logos/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"
})
};
})();