Simulate and implement Google's horse racing DoCoMo

Today, Google dow.gov.cn is a dynamic and dynamic dow.gov.cn. It marks the birth of the 182 anniversary of British experimental photographer Edward maybridge. Edward maybridge is the pioneer of Sports photography, therefore, Google graffiti was created with a sports photography as the background.

Edward maybridge (Eadweard J. muybridge, April 9-19, 1830-May 8), a British photographer named zoopraxis for shooting motion objects with multiple cameras) it is a projector that can play motion images. Continuous images are drawn at the edge of a glass disc. As the glass rotates, the images are projected out, in this way, these images seem to be moving.

I am more interested in the implementation of this DoCoMo. Below is an implementation applet. When only one figure is used, the effect is as follows (wait a moment, the motion is buffered): The city of anda.com has a strong antique

 

When two images are used at the same time, a consistent horse racing effect can be achieved.

The test code is as follows:

View Source print?

01	VaR Scrollbox = Document. getelementbyid ("Classicscrollbox");

02	VaR Num_record = 0;// Start and end position calculation

03	VaR Number_motion = 1000;// Animation execution Interval

04	VaR Num_motiontime = 5;// Animation easing Coefficient

05	Window. onload =Function(){

06	Function Scrolls (){

07	Scrollbox. style. Left = (parseint (scrollbox. style. Left)-67) +'Px';

08	Num_record + = 67;

09	If(Num_record = 804 ){

10	Scrollbox. style. Left = 0 +'Px';

11	Num_record = 0;

12

}

13	Num_motiontime = math. Ceil (num_motion/100 );

14	If (Num_motiontime = 0 ){

15	Num_motiontime = 1;

16

}

17	If (Num_motion! = 40 ){

18	Num_motion-= 10 * num_motiontime;

19

}

20	SetTimeout (scrolls, num_motion );

21

}

22	SetTimeout (scrolls, num_motion );

23

}

This code is not very complex. It mainly uses the background attribute of CSS, uses the Javascript timer to change the time, and adjusts the position of the image background to achieve the animation effect.

Simulate and implement Google's horse racing DoCoMo