SF的关于页面中“MileStone”部分动画是如何实现的?

Viewed 4768

地址是这个:http://segmentfault.com/about

无意中看了下中间那部分里程碑动画实现的html代码,发现在动画进行中(点向左向右箭头时),不论是#milestone-box,#milestone这两个容器,还是里面描述milestone的div,他们css的left属性或是margin等等我能想到的用来定位的属性都没有变化。

那这个动画是如何实现的呢?我想了半天还是没想通,有什么我忽略的地方吗?求解

1 Answers

不知你是如何得出#milestone-box的left没有变化的结论,让我们做个很简单的试验。
页面载入时,用Firebug对$("#milestone-box").offset().left求值,假设是x
点击箭头移动后,再次求值,假设为y,那么肯定有 |x-y|=235,即一个box的宽度。

------------------------------- 补充答案 -----------------------------
milestone 的 scrollLeft 变了

$("#milestone-box")offsetLeft确实变化了,不过楼主问的是通过什么属性值的改变导致的这个变化,我看了很久,也没有发现css属性值有改变,期待高人解答

@sapjax 同理试试 document.getElementById("milestone").scrollLeft 你就明白了

@April.L 明白了,很古老的滚动方式,多谢!