你的位置:首页 > 软件开发 > 网页设计 > 时间轴效果解析

时间轴效果解析

发布时间:2017-06-19 12:00:16
虽然时间轴早已不是什么新鲜事物了,个人只是感兴趣所以就研究一下,最近从网上搜索了一个个人感觉比较好的时间轴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 (#换成@)。