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

赛马Doodle的实现原理
服务器君一共花费了65.974 ms进行了4次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

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

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

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

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

测试代码如下

    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演示:

本文地址:http://www.nowamagic.net/librarys/veda/detail/1734,欢迎访问原出处。

不打个分吗?

转载随意,但请带上本文地址:

http://www.nowamagic.net/librarys/veda/detail/1734

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

大家都在看

  1. [ 94 分 ] [ 21  ] 我回来了
  2. [ 95 分 ] [ 7  ] 中华智慧感悟:人之道

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《高性能JavaScript》 Nicholas C. Zakas (作者), 赵泽欣 (合著者), 丁琛 (译者)

《高性能JavaScript》揭示的技术和策略能帮助你在开发过程中消除性能瓶颈。你将会了解如何提升各方面的性能,包括代码的加载、运行、DOM 交互、页面生存周期等。雅虎的前端工程师 Nicholas C. Zakas 和其他五位 JavaScript 专家介绍了页面代码加载的最佳方法和编程技巧,来帮助你编写更为高效和快速的代码。你还会了解到构建和部署文件到生产环境的最佳实践,以及有助于定位线上问题的工具。如果你使用 JavaScript 构建交互丰富的 Web 应用,那么 JavaScript 代码可能是造成你的Web应用速度变慢的主要原因。

更多计算机宝库...