Un exemple de la façon de supprimer les lignes de tête et de queue de la timeline à l'aide de jquery

Cet article vous présente principalement la méthode d'utilisation de jquery pour supprimer les lignes de tête et de queue de l'axe du temps. L'article donne des exemples de codes détaillés pour votre référence et votre étude. Il a une certaine valeur de référence et d'apprentissage pour tous les amis. si vous en avez besoin, vous pouvez nous rejoindre ci-dessous. J'espère que cela aide tout le monde.

Avant-propos

Dans le passé, lorsque je faisais une structure similaire à un axe du temps, c'était presque toujours une ligne grise qui descendait sans fin. La ligne d'aujourd'hui va du premier point au dernier point. La question est donc : la hauteur du contenu n'est pas fixe. Comment déterminer la longueur de la ligne ? Comment peut-il être connecté bout à bout du premier point au dernier point ? C'est ce qui se passe ensuite.

Regardez d'abord l'effet, comme indiqué ci-dessous :

Idées :

1. Écrivez un p pour envelopper tout le contenu, et vous saurez tout La hauteur totale de la liste ;

2. Écrivez une ligne fine et positionnez-la à droite, oui, la hauteur est de 100%. La ligne fine sera aussi haute que le contenu ;

3. La petite distance du point de départ Quelle est la hauteur du sommet, quelle est la hauteur de la ligne fine par rapport au sommet

4. Utilisez js pour définir la hauteur de la ligne fine = hauteur totale ; - la hauteur de la dernière liste

! ! ! Quoi? ? tu ne sais pas lire ? ? Peu importe, laissez-moi le résumer en une phrase : la hauteur de la ligne fine moins la hauteur du dernier contenu est parfaite.

Méthode de mise en œuvre

Étape 1 : Écrire la structure

<p class="line_box">
  <p class="line"></p>
  <ul>
   <li><i></i>就是这么帅，就是这么不要脸！写多长都没关系，反正右边线条会自适应！<span></span></li>
   <li><i></i>没办法，就是这么帅，就是这么叼！<span></span></li>
   <li><i></i>帅到自然醒，帅到闪到腰！<span></span></li>
  </ul>
 </p>

　(1) Définir une fine ligne grise.ligne

　(2) Chaque Le le contenu est un li

(3) i est le triangle (quoi ?? Tu ne peux pas dessiner un triangle avec CSS ? Baidu, tu le sauras)

(4) span est le petit rouge Cliquez

Étape 2 : Style d'écriture

<style type="text/css">
 .line_box {width: 200px;margin: 0 auto;position: relative;}
 .line {width: 2px;height: 100%;background-color: #ccc;position: absolute;left: 0;top: 20px;}
 ul {padding-left: 20px;}
 li { padding: 10px;background-color: #cb3636;color: #fff;position: relative;margin-bottom: 20px;}
 li i {border: 10px solid;border-color:transparent #cb3636 transparent transparent;position: absolute;left: -18px;top: 10px;}
 li span {width:10px;height: 10px;background-color:#cb3636; position: absolute;left: -24px;top: 15px;border-radius: 50%;}
</style>

(1) On dirait qu'il n'y a rien à dire. . .

　(2) Haha, j'y ai pensé. Le principe du dessin d'un triangle est de définir une bordure en rouge et les trois autres côtés en transparent, comme ceci :

　　border-color:transparent red transparent transparent Les directions sont haut, droite, bas, gauche

Étape 3 : Écrire le code js

(function hei(){

 var li = $("li"),
  len = li.length,
  he = $(".line_box").outerHeight(),
  old = li.eq(len - 1).outerHeight();

 $(".line").height( Number(he) - Number(old) );

}());

　(1) Obtenez la hauteur de la couche la plus externe qu'il

　(2) Obtenez la hauteur du dernier contenu ancien

　(3) La hauteur totale est (1) - (2)

　(4) La raison pour laquelle externalHeight() est utilisée ici est d'inclure la hauteur du rembourrage et de la bordure

Résumé :

Cette fois, nous utilisons la hauteur totale moins la hauteur du dernier contenu pour calculer la hauteur de la ligne fine. Bien sûr, il existe d'autres méthodes, mais il est préférable d'ajouter un redimensionnement pour surveiller le navigateur. change et réinitialise-la. La hauteur de la ligne fine est plus parfaite.

Baidu CDN est utilisé ici :

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

Le code complet est :

 
 
 
 
 
 
 
 
 
 
 
 
  
就是这么帅，就是这么不要脸！就是这么帅，就是这么不要脸！
 
  
没办法，就是这么帅，就是这么叼！
 
  
帅到自然醒，帅到闪到腰！
 
 
 
 
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 
<script> 
$(function(){ 
 
(function hei(){ 
 
 var li = $("li"), 
  len = li.length, 
  he = $(".line_box").outerHeight(), 
  old = li.eq(len - 1).outerHeight(); 
 
 $(".line").height( Number(he) - Number(old) ); 
 
}()); 
 
}) 
 
</script> 
 

Recommandations associées :

Angularjs Partage des effets de timeline

Plusieurs magnifiques tutoriels de timeline implémentés dans Jquery

Analyse des effets de timeline

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!