地址是这个:http://segmentfault.com/about
无意中看了下中间那部分里程碑动画实现的html代码,发现在动画进行中(点向左向右箭头时),不论是#milestone-box,#milestone这两个容器,还是里面描述milestone的div,他们css的left属性或是margin等等我能想到的用来定位的属性都没有变化。
那这个动画是如何实现的呢?我想了半天还是没想通,有什么我忽略的地方吗?求解
地址是这个:http://segmentfault.com/about
无意中看了下中间那部分里程碑动画实现的html代码,发现在动画进行中(点向左向右箭头时),不论是#milestone-box,#milestone这两个容器,还是里面描述milestone的div,他们css的left属性或是margin等等我能想到的用来定位的属性都没有变化。
那这个动画是如何实现的呢?我想了半天还是没想通,有什么我忽略的地方吗?求解
不知你是如何得出#milestone-box的left没有变化的结论,让我们做个很简单的试验。
页面载入时,用Firebug对$("#milestone-box").offset().left求值,假设是x
点击箭头移动后,再次求值,假设为y,那么肯定有 |x-y|=235,即一个box的宽度。
------------------------------- 补充答案 -----------------------------
milestone 的 scrollLeft 变了