2015，祝福大家新年快乐，熬夜无聊，无意间逛百度发现logo特效，研究了一下，是合成所有的图片然后更改backgroung-position实现的，然后自己实现了一下
先上图看一下效果.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <style> 7 #box{ 8 position: absolute; 9 top: 0px; 10 left: 50%; 11 margin-left:-135px; 12 width: 270px; 13 height: 129px; 14 cursor: pointer; 15 background: url(http://www.baidu.com/img/logo_newyear_341c17435f0cc9b19cd14ad060e1acd9.png) -27540px 0px no-repeat; 16 } 17 </style> 18 </head> 19 20 <body> 21 22 <div id="box"></div> 23 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script> 24 <script> 25 $(function (){ 26 var x1 = 0, 27 x2 = -8100, 28 timer1 = null, 29 timer2 = null; 30 31 timer1 = setInterval(function (){ 32 x1-=270; 33 console.log(x1); 34 35 $("#box").css("backgroundPosition",x1+"px 0px"); 36 37 if(x1 <= -7830){//-7830 -8100 38 x1 = 0; 39 } 40 },50) 41 42 43 $("#box").click(function(){ 44 clearInterval(timer1); 45 logoPlay(); 46 }) 47 48 var logoPlay = function (){ 49 x2 = -8100; 50 51 clearInterval(timer2); 52 timer2 = setInterval(function (){ 53 x2-=270; 54 console.log(x2); 55 56 $("#box").css("backgroundPosition",x2+"px 0px"); 57 58 if(x2 <= -27540){ 59 clearInterval(timer2); 60 } 61 },50) 62 } 63 64 }) 65 </script> 66 </body> 67 </html>
p.s: 2015 新的一年，希望自己快快成长
附件百度网盘链接地址：http://pan.baidu.com/s/1c0yB7mo