虽然时间轴早已不是什么新鲜事物了,个人只是感兴趣所以就研究一下,最近从网上搜索了一个个人感觉比较好的时间轴demo,下载下来研究了一下并做了下修改.具体的效果如下图:(该demo实现的是滚动加载图片)代码地址:http://files.cnblogs.com/files/cby- ...
虽然时间轴早已不是什么新鲜事物了,个人只是感兴趣所以就研究一下,最近从网上搜索了一个个人感觉比较好的时间轴demo,下载下来研究了一下并做了下修改.具体的效果如下图:(该demo实现的是滚动加载图片)
代码地址:http://files.cnblogs.com/files/cby-love/html5响应式时间轴.zip
如何实现滚动加载图片的?最主要是以下的代码部分:
(function() { $(document).ready(function() { var timelineAnimate; timelineAnimate = function(elem) { return $(".timeline.animated .timeline-row").each(function(i) { var bottom_of_object, bottom_of_window; bottom_of_object = $(this).position().top + $(this).outerHeight(); bottom_of_window = $(window).scrollTop() + $(window).height(); if (bottom_of_window > bottom_of_object) { return $(this).addClass("active"); } }); }; timelineAnimate(); return $(window).scroll(function() { return timelineAnimate(); }); });}).call(this);
bottom_of_object = $(this).position().top + $(this).outerHeight();
$(this).position().top表示当前元素距离父元素的距离,个人理解为应该就是margintop的值吧,
$(this).outerHeight()表示当前元素的高度还有padding+border,但不包括marginleft: -20px; }
原标题:时间轴效果解析
关键词:时间
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。