雖然時間軸早已不是什麼新鮮事物了,個人只是感興趣所以就研究一下,最近從網上搜索了一個個人感覺比較好的時間軸demo,下載下來研究了一下並做了下修改.具體的效果如下圖:(該demo實現的是滾動載入圖片) 代碼地址：http://files.cnblogs.com/files/cby-love/html ...
雖然時間軸早已不是什麼新鮮事物了,個人只是感興趣所以就研究一下,最近從網上搜索了一個個人感覺比較好的時間軸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);
因為我們的樣例中實際上還不是純粹的動態載入圖片(即動態生成html標簽和dom元素,後續可以再去實現)，只是把原來頁面中的隱藏或者說把opacity屬性值由0變為1了.通過看以上代碼，這個地方實際上是有個小演算法的.
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; }
很明顯在執行$(this).addClass("active")之後，以下樣式起作用了.
.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; }
transition(css3標簽)定義了類選擇器.timeline.animated .timeline-row .timeline-content的包含對象只有有任何樣式更改都會有一個0.8.s時間的過渡效果，當然這個時間
我們可以重新去修改。
因為我們在執行$(this).addClass("active")之前，我們時間軸左邊的對象的樣式如下(我們暫且先說時間軸左邊的)
.timeline.animated .timeline-row:nth-child(odd) .timeline-content {
opacity: 0;
left: -20px; }
執行之後樣式如下:
.timeline.animated .timeline-row.active .timeline-content { opacity: 1; left: 0; }
所以會有一個從左到右的一個實現效果，因為透明度和左邊距都變了。
時間軸右邊的對象為什麼是從右到左的一個切入效果呢，首先執行$(this).addClass("active")之前，時間軸右邊對象樣式為
.timeline.animated .timeline-row .timeline-content { opacity: 0; left: 20px; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; transition: all 0.8s; }
我們看到left為20px,opacity(透明度為0)，執行$(this).addClass("active")之後
.timeline.animated .timeline-row.active .timeline-content { opacity: 1; left: 0; }
left為0，opacity(透明度為1)，transition為0.8s,所以有一個從右到左的一個過渡效果了.
以上代碼有一個考究的地方
.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>
其中p:nth-child(2)表示p的父元素中第二個子元素，並且這個子元素是p，這時候第二個子元素正好是P所以顯示效果如下
如果改為以下
<h1>這是標題</h1> <h2>第一個段落。</h2> <p>第二個段落。</p> <p>第三個段落。</p> <p>第四個段落。</p>
這時候效果如下
因為p:nth-child(2)第二個子元素是h2,而不是p所以沒找到匹配的元素，所以背景色也沒生效.
先研究到這裡，後續有時間準備讓頁面元素動態載入，而不是在頁面上早早顯示出來，只是通過控制透明度來顯示或者隱藏.
