Analyse der Auswirkungen der Zeitachse

Obwohl die Timeline nichts Neues ist, habe ich sie einfach studiert, also habe ich kürzlich im Internet nach einer Timeline-Demo gesucht, sie heruntergeladen, studiert und einige Änderungen vorgenommen Der Effekt ist wie folgt: (Diese Demo implementiert das Scrollen-Laden von Bildern)

Codeadresse: Responsive Timeline.zip

So implementieren Sie das Scrollen-Laden von Bildern ?Der wichtigste Teil ist der folgende Codeteil:

(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);

Da es sich bei unserem Beispiel eigentlich nicht um ein reines dynamisches Laden von Bildern handelt (also dynamisch generierte HTML-Tags und Dom-Elemente, Folgemaßnahmen Sie können es erneut implementieren), indem Sie einfach die Originalseite ausblenden oder den Wert des Deckkraftattributs von 0 auf 1 ändern. Wenn Sie sich den obigen Code ansehen, verfügt dieser Ort tatsächlich über einen kleinen Algorithmus

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; }

Es ist offensichtlich, dass $(this).addClass("active " ), funktioniert der folgende Stil.

.timeline.animated .timeline-row.active .timeline-content {opacity: 1;left: 0; }

Warum gibt es einen Übergangs-Floating-Effekt? Tatsächlich ist er definiert

.timeline.animated .timeline-row .timeline-content {opacity: 0;left: 20px;-webkit-transition: all 0.8s;-moz-transition: all 0.8s;transition: all 0.8s; }

Übergang (css3-Tag) definiert den Klassenselektor .timeline.animated .timeline-row .timeline-content, der Objekte enthält. Diesmal haben natürlich nur alle Stiländerungen einen Übergangseffekt

Wir können es noch einmal ändern.

Denn bevor wir $(this).addClass("active") ausführen, ist der Stil des Objekts auf der linken Seite unserer Zeitleiste wie folgt (sprechen wir zuerst über die linke Seite der Zeitleiste)

.timeline.animated .timeline-row:nth-child(odd) .timeline-content {

opacity: 0;

:; }

Der Stil nach der Ausführung ist wie folgt:

.timeline.animated .timeline-row.active .timeline-content {opacity: 1;left: 0; }

Es wird also einen Implementierungseffekt von links nach geben rechts, da sich die Transparenz und der linke Rand geändert haben.

Warum hat das Objekt auf der rechten Seite der Zeitleiste einen Einschnitteffekt von rechts nach links, bevor $(this).addClass("active") zuerst ausgeführt wird? des Objekts auf der rechten Seite der Zeitleiste ist

.timeline.animated .timeline-row .timeline-content {opacity: 0;left: 20px;-webkit-transition: all 0.8s;-moz-transition: all 0.8s;transition: all 0.8s; }

Wir sehen, dass die linke Seite 20 Pixel groß ist, Deckkraft (Transparenz ist 0), nachdem $(this).addClass(" ausgeführt wurde aktiv")

 .timeline.animated .timeline-row.active .timeline-content {opacity: 1;left: 0; }

links ist 0, die Deckkraft (Transparenz ist 1) und der Übergang beträgt 0,8 s, es gibt also einen Übergangseffekt von rechts nach links.

Im obigen Code gibt es einen heiklen Punkt

.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>

wobei p:nth-child(2) das zweite untergeordnete Element im übergeordneten Element darstellt von p, und dieses untergeordnete Element ist p. Zu diesem Zeitpunkt sind die beiden Unterelemente zufällig P, daher ist der Anzeigeeffekt wie folgt

Wenn ja wie folgt geändert

<h1>这是标题</h1><h2>第一个段落。</h2><p>第二个段落。</p><p>第三个段落。</p><p>第四个段落。</p>

dann ist der Effekt wie folgt

Weil das zweite untergeordnete Element von p:nth- child(2) ist h2, nicht p, es wurde kein passendes Element gefunden, daher wird die Hintergrundfarbe nicht wirksam.

Lassen Sie uns zuerst hier lernen, dann haben wir Zeit, uns auf das dynamische Laden von Seitenelementen vorzubereiten , anstatt sie früh auf der Seite anzuzeigen, blenden Sie sie einfach ein oder aus, indem Sie die Transparenz steuern.

 <br>

<br><br>

Das obige ist der detaillierte Inhalt vonAnalyse der Auswirkungen der Zeitachse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!