雖然時間軸早已不是什麼新鮮事物了,個人只是感興趣所以就研究一下,最近從網上搜索了一個個人感覺比較好的時間軸demo,下載下來研究了一下並做了下修改.具體的效果如下圖:(該demo實現的是滾動載入圖片)
程式碼位址:響應式時間軸.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);
if (bottom_of_window > bottom_of_object) 才会去给当前对象(即类控制器为.timeline.animated .timeline-row的对象)添加类选择器active(暂且先不具体该类选择器实现什么效果) 我们先讨论下这两个值bottom_of_window和bottom_of_object
bottom_of_window = $(window).scrollTop() + $(window).height();
$(window).scrollTop()表示当前滚动条的位置距离页面顶端的距离,其实可以理解为页面滚动条拉到某个位置,顶部隐藏的页面内容的高度;
$(window).height()表示当前可视页面区域的高度; bottom_of_object = $(this).position().top + $(this).outerHeight();
$(this).position().top表示当前元素距离父元素的距离,个人理解为应该就是margintop的值吧,
$(this).outerHeight()表示当前元素的高度还有padding+border,但不包括margin 如下盒子模型:
#
当if (bottom_of_window > bottom_of_object)为真的情况下,我们看到执行了return $(this).addClass("active"),这段代码起什么作用呢,其实作用就是 用户在拖动滚动条时时间轴内容的过渡效果,我们可以看到添加效果是向.timeline.animated .timeline-row添加的,我们查看样式文件关于这个类选择器的所在对象都有什么 样式效果:
.timeline.animated .timeline-row .timeline-content {opacity: 0;left: 20px;-webkit-transition: all 0.8s;-moz-transition: all 0.8s;transition: all 0.8s; } .timeline.animated .timeline-row:nth-child(odd) .timeline-content {left: -20px; } .timeline.animated .timeline-row.active .timeline-content {opacity: 1;left: 0; } .timeline.animated .timeline-row.active:nth-child(odd) .timeline-content {left: 0; }
.timeline.animated .timeline-row.active .timeline-content {opacity: 1;left: 0; }
.timeline.animated .timeline-row .timeline-content {opacity: 0;left: 20px;-webkit-transition: all 0.8s;-moz-transition: all 0.8s;transition: all 0.8s; }
.timeline.animated .timeline-row:nth-child(odd) .timeline-content {
opacity: 0; :; }
.timeline.animated .timeline-row.active .timeline-content {opacity: 1;left: 0; }
.timeline.animated .timeline-row .timeline-content {opacity: 0;left: 20px;-webkit-transition: all 0.8s;-moz-transition: all 0.8s;transition: all 0.8s; }
.timeline.animated .timeline-row.active .timeline-content {opacity: 1;left: 0; }
.timeline-row:nth-child(odd)中的nth-child(odd)选择器,因为css的解析顺序是从右到左,所以这个地方的意思表示.timeline-row为奇数的对象(属于其父元素的第奇数个timeline-row)
假如有以下代码,
<!DOCTYPE html><html><head><style> p:nth-child(2){background:#ff0000;}</style></head><body><h1>这是标题</h1><p>第一个段落。</p><p>第二个段落。</p><p>第三个段落。</p><p>第四个段落。</p><p><b>注释:</b>Internet Explorer 不支持 :nth-child() 选择器。</p></body></html>
<h1>这是标题</h1><h2>第一个段落。</h2><p>第二个段落。</p><p>第三个段落。</p><p>第四个段落。</p>
##因為p:nth-child(2)第二個子元素是h2,而不是p所以沒找到匹配的元素,所以背景色也沒生效.
#先研究到這裡,後續有時間準備讓頁面元素動態加載,而不是在頁面上早早顯示出來,只是透過控制透明度來顯示或隱藏.
<br>
<br><br>
以上是關於時間軸的效果解析的詳細內容。更多資訊請關注PHP中文網其他相關文章!