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
时间： 2024-08-08 22:44:40