Ruby China

JavaScript jQuery 动画的原理？

bryanwong · April 12, 2012 · Last by bryanwong replied at April 12, 2012 · 3896 hits

http://www.udee.cn/
前淘宝员工做的类 read it later 应用。

网站首页的动画是用一张大图片做的：

  1. 实现原理是什么？
  2. 开发的时候怎样来调试页面？用 firebug 吗？

谢谢！

BBQ #1 April 12, 2012

CSS+JS 的一些插件做的！底图上有 2 张图层在移动！

ichord #2 April 12, 2012

也許找找看有沒什麼類似於 jquery 動畫插件 的東西。 剛才用 chrome 自帶的 developer tools 觀察了下。 按时间轴分别变动元素的三个属性 top ，left 和 opacity.

ichord #3 April 12, 2012

每一组动画按下面那列橙色方块为标记..

ichord #4 April 12, 2012

其实不用插件... 估计用 .animate() 方法就足矣。

clearJiang #5 April 12, 2012

实现就是这个文件 http://www.udee.cn/Public/Js/index.js?time=2012041101

倒是不长，挺不错的

bryanwong #6 April 12, 2012

谢谢大家的回复！

站在开发的角度，是怎样做的呢？比如开发的步骤？

是先大概想好动画的元素，然后按照时间的顺序，一步步实现的吗？这样开发的时候有点乱吧？

You need to Sign in before reply, if you don't have an account, please Sign up first.