昨天1月4日是英国伟大的数学家、物理学家艾萨克·牛顿（Isaac Newton）的诞辰，google为其做了纪念Logo。如上图，打开谷歌搜索主页，先显示的是一棵苹果树，几秒钟之后还会有一个苹果掉到页面下方。此Logo做的既符合主题又生动俏皮，特别是苹果掉落的效果，让人不得不佩服设计师的想象力。
苹果掉落是如何实现的
下面让我们看一下此效果是如何实现的，请点击运行代码查看效果：
提示：您可以先修改部分代码再运行
（注：google的源代码是经过压缩的，以上代码经过格式处理并有轻微改动）
核心代码就是下面这一段
var apple = function() {
window.lol && lol();
setTimeout(
function() {
var h = 0, v = 1, f = document.getElementById('fall'),
i = setInterval(
function() {
if (f) {
var r = parseInt(f.style.right) + h, b = parseInt(f.style.bottom) - v;
f.style.right = r + 'px';
f.style.bottom = b + 'px';
if (b > -210) {
v += 2
}
else {
h = (v > 9) ? v * 0.1 : 0; v *= (v > 9) ? -0.3 : 0
}
}
}, 25);
}, 2000)
}
可能有人会说“不就是一个图片上加了点js和Css吗？”。是的，这就够你学的了，Google就是这样，用简单的技术实现令人惊叹的效果。
今日附送 更多>>
发张Google的老照片。
原创文章请注明转载自： 三七八蛋
本文地址： http://www.378Q.com.cn/html-js-css/158.html
