首頁 > 文章 > web前端 > 關於時間軸的效果解析

關於時間軸的效果解析

怪我咯原創: 2017-06-26 11:55:302552瀏覽

雖然時間軸早已不是什麼新鮮事物了,個人只是感興趣所以就研究一下,最近從網上搜索了一個個人感覺比較好的時間軸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);

因為我們的範例中其實還不是純粹的動態載入圖片(即動態產生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;

:; }

執行之後樣式如下:

.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所以沒找到匹配的元素，所以背景色也沒生效.

#先研究到這裡，後續有時間準備讓頁面元素動態加載，而不是在頁面上早早顯示出來，只是透過控制透明度來顯示或隱藏.

 <br>

<br><br>

以上是關於時間軸的效果解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：偽元素::before與::after的用法實例教程下一篇：偽元素::before與::after的用法實例教程

看更多