2015百度logo特效

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

posted @ 2015-01-01 01:41  willian.J  阅读(269)  评论(0)  编辑  收藏  举报