Analyse des effets de la chronologie

Bien que la chronologie n'ait rien de nouveau, elle m'intéressait simplement, alors je l'ai étudiée récemment et j'ai recherché une démo de chronologie qui me paraissait meilleure sur Internet, je l'ai téléchargée, je l'ai étudiée et j'ai apporté quelques modifications spécifiquement. L'effet est le suivant : (Cette démo implémente le chargement par défilement des images)

Adresse du code : Responsive Timeline.zip

Comment implémenter le chargement par défilement des images ?La partie la plus importante est la partie de code suivante :

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

Parce que notre exemple n'est pas en fait un pur chargement dynamique d'images (c'est-à-dire des balises html et des éléments dom générés dynamiquement, suivi Vous pouvez l'implémenter à nouveau), masquez simplement la page d'origine ou changez la valeur de l'attribut d'opacité de 0 à 1. En regardant le code ci-dessus, cet endroit a en fait un petit algorithme

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

Il est évident que $(this).addClass("active " ), le style suivant fonctionne

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

Pourquoi y a-t-il un effet flottant transitionnel En fait, il est défini

.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 (balise css3) définit le sélecteur de classe .timeline.animated .timeline-row .timeline-content contenant des objets. Seuls les changements de style auront un effet de transition de 0,8.s. Bien sûr, cette fois

.

Nous pouvons le modifier à nouveau.

Parce qu'avant d'exécuter $(this).addClass("active"), le style de l'objet sur le côté gauche de notre timeline est le suivant (parlons d'abord du côté gauche de la timeline)

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

opacity: 0;

:; }

Le style après exécution est le suivant :

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

Il y aura donc un effet d'implémentation de gauche à à droite, car la transparence et la marge gauche ont changé.

Pourquoi l'objet sur le côté droit de la timeline est-il un effet de coupure de droite à gauche ? Avant d'exécuter $(this).addClass("active") en premier, le style ? de l'objet sur le côté droit de la timeline est

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

Nous voyons que la gauche est de 20px, l'opacité (la transparence est de 0), après avoir exécuté $(this).addClass(" actif")

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

la gauche est de 0, l'opacité (la transparence est de 1) et la transition est de 0,8 s, il y a donc un effet de transition de droite à gauche.

Il y a un point délicat dans le code ci-dessus

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

où p:nth-child(2) représente le deuxième élément enfant dans l'élément parent de p, et cet élément enfant est p. À ce moment, les deux sous-éléments se trouvent être P, donc l'effet d'affichage est le suivant

Si c'est le cas. modifié par ce qui suit

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

alors l'effet est le suivant

Parce que le deuxième élément enfant de p:nth- child(2) est h2, pas p, aucun élément correspondant n'est trouvé, donc la couleur d'arrière-plan ne prend pas effet.

Étudions ici d'abord, puis nous aurons le temps de nous préparer au chargement dynamique des éléments de la page , au lieu de les afficher au début de la page, il suffit de les afficher ou de les masquer en contrôlant la transparence.

 <br>

<br><br>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!