牛~ 我那天也看到google首页 就没想着怎么整出来的 差距啊~

楼主牛啊!很不错呀!

@Kolibre 我这里只有IE9和Chromium13,所以其它浏览器没有做测试，有空的话您可以看看是哪的问题？

@上善若水. 功能是比较简单，只是做图片比较麻烦，嘿嘿。

@柒玘雅 谢谢，一时兴起，随便写的。

小菜进来学习膜拜下。 不过博主的例子在ie6，火狐都能通过，就是maxthon会有图像漂移的现象，好像是设置的图像高度在maxthon下会有变化，不知为何。

那天也看到了，google的创意真给力，看了看它的图片，就是做了很多帧的图片。 功能比较简单。

这个东西不错 哈

@Boundary @EtherDream @Areyan @路过秋天 @愤怒的晃晃 谢谢各位支持

前端技术越来越魅力焕发了，楼主不错

以后所有浏览器都支持apng格式就轻松多了

多谢楼主分享。

夜半支持一下，挺好的Y！

牛逼中的战斗逼！

@木树奋斗 油门踩到底了

@cqfeng 大家都辛苦啊

楼主加油！

lz辛苦了

@zhangmeiqing 没错

@光轻如纸张 有用就好

其实我觉得，在IT方面技术不是最重要（也不光是IT）。都可以山寨出来。重要是“创新”

好东西

@《YY》 做这些人家应该有捷径，只是创意得先出来

@紫云飞 要是gif也能用鼠标点击后再播放该多好。

@zell419 代码写的比较简单，见笑了。

@hua_js 可惜不是俺想出来的。。。

谷歌首页的每一次动画 都苦了美工

有三个没弄透明 忘了 另外 backgroundPositionX不兼容firefox opera

gif版本 [img]http://g.mozest.com/attachments/month_1110/1110121454bb031f951edbf699.gif[/img][img]http://g.mozest.com/attachments/month_1110/111012145438e1a9421df9bcab.gif[/img][img]http://g.mozest.com/attachments/month_1110/11101214541117b5f8cbdd6077.gif[/img][img]http://g.mozest.com/attachments/month_1110/111012145463c39df82e8f290a.gif[/img][img]http://g.mozest.com/attachments/month_1110/1110121454b65e2b322e48298b.gif[/img]

代码挺简洁的 。楼主威武 。

很有创意。。。

@sking7 为了兼容将帧放在多行上，所以这里设置了height. 对了，图片是从google首页弄来的，你不上google的么？

@帽儿 原理都是一样的，我只是把代码稍稍打了一下包，嘿嘿。

图片哪来的啊楼主、、感觉光组合这些图片够费劲的。。 还有确定背景图片的postion也不容易啊。。都是细活、、 代码上有个以为： [code=csharp] var position = "-" + (x - 1) * me.width + "px -" + (y - 1) * me.height + "px"; [/code] 这里有必要设置height吗、、、

这个动画就像呼吸一样简单！运行下面的代码，试试看！～～ [code=html] <div style="height: 180px; width: 420px; background-color: #ffffff; border: solid 2px #aaaaaa; position: relative;"> <div class="animationItem" style="left: 246px; top: 6px; width: 98px; height: 156px; background-image: url(http://www.yomeier.com/images/6_gumby11-initial-sprite.png); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; background-position: -682px 0px; background-repeat: initial initial; position: absolute;" id="animationDiv4"></div> </div> <script> var animationDiv4 = document.getElementById('animationDiv4'); var n = 0;// 位置 var si = null;// 定时器 // 初始化事件 animationDiv4.onmouseover = animationDiv4_Mouseover; animationDiv4.onmouseout = animationDiv4_Mouseout; animationDiv4.onclick = animationDiv4_Click; function animationDiv4_Mouseover(){ animationDiv4.style.backgroundImage = 'url(http://www.yomeier.com/images/6_gumby11-initial-sprite.png)'; animationDiv4.style.backgroundPositionX = '-780px'; } function animationDiv4_Mouseout(){ animationDiv4.style.backgroundImage = 'url(http://www.yomeier.com/images/6_gumby11-initial-sprite.png)'; animationDiv4.style.backgroundPositionX = '-680px'; } function animationDiv4_Click(){ animationDiv4.style.backgroundImage = 'url(http://www.yomeier.com/images/10_gumby11-gumby.jpg)'; si = setInterval("animationDiv4_Animation()", 80); } function animationDiv4_Animation(){ // 播放动画时清除事件 animationDiv4.onmouseover = null; animationDiv4.onmouseout = null; animationDiv4.onclick = null; // 控制播放 var x = n-=98; animationDiv4.style.backgroundPositionX = x + 'px'; animationDiv4.style.backgroundPositionY = '0px'; // 停止播放 if(x < -14996) { n = 0; clearInterval(si); animationDiv4.onmouseover = animationDiv4_Mouseover; animationDiv4.onmouseout = animationDiv4_Mouseout; animationDiv4.onclick = animationDiv4_Click; } } </script> [/code]

@Ou lei 正常人睡觉的时间，程序员还在敲代码

@cheersun2010 @技术拓荒者 谢谢推荐，谢谢回复

@樊勇 多谢推荐，本人不才啊。

果断推荐！

程序员都很闲啊。

楼主厉害

推荐！！！ 楼主太有才了。。。

@ERS 漂亮的东西，大家都喜欢，呵呵。

@温景良(Jason) 多谢推荐

@狼Robot 有看过粘土长版动画的，感觉很厉害，可更喜欢漂亮的画型

推荐＋１是必须的

@waterfis 谢谢，希望对你有用。

楼住的代码有个小问题，就是点击一个小球播放完动画后，页面还要再闪一下刚才的画面。

支持一下了啊，呵呵

@ERS 审美观不足，嘿嘿。