Utilisez jquery pour supprimer les lignes en tête et en queue de la timeline-js tutoriel-php.cn

Utilisez jquery pour supprimer les lignes en tête et en queue de la timeline

巴扎黑

Libérer： 2017-06-26 14:35:26

original

1280 Les gens l'ont consulté

1. Introduction : Dans le passé, lorsque je créais des structures similaires à l'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.

Deuxièmement, regardez d'abord l'effet, comme indiqué ci-dessous :

Troisièmement, les idées :

1. Écrivez un div à envelopper tout le contenu. Vous pouvez connaître la hauteur totale de toutes les listes

2. Écrivez une ligne fine et positionnez-la à droite, oui, la hauteur est de 100%. le contenu est :

3. Démarrer La ligne fine est aussi haute que le haut à partir du haut

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.

4. Étape 1 : Écrire la structure

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

Copier après la connexion

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

　(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

5. Étape 2 : Écrivez le style

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

Copier après la connexion

　(1) Il semble qu'il n'y ait 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

6. Étape 3 : Écrivez le code js

 1 (function hei(){ 2  3     var li  = $("li"), 4         len = li.length, 5         he  = $(".line_box").outerHeight(), 6         old = li.eq(len - 1).outerHeight(); 7  8     $(".line").height( Number(he) - Number(old) ); 9 10 }());

Copier après la connexion

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

　(2) Obtenez le dernier contenu La hauteur de l'ancien

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

　(4) La raison pour laquelle externalHeight() est utilisée ici est pour faire la hauteur de remplissage et bordure identiques Comptez dans

7. Résumé final :

Cette fois, la hauteur de la ligne fine est calculée en soustrayant la hauteur du dernier contenu de la hauteur totale. , il existe d'autres méthodes, mais il est préférable d'ajouter un redimensionnement pour surveiller les modifications du navigateur et réinitialiser la hauteur de la ligne fine.

Baidu CDN est utilisé ici :

Le code complet est :

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <style type="text/css"> 6 .line_box {width: 200px;margin: 0 auto;position: relative;} 7 .line {width: 2px;height: 100%;background-color: #ccc;position: absolute;left: 0;top: 20px;} 8 ul {padding-left: 20px;} 9 li { padding: 10px;background-color: #cb3636;color: #fff;position: relative;margin-bottom: 20px;}10 li i {border: 10px solid;border-color:transparent #cb3636 transparent transparent;position: absolute;left: -18px;top: 10px;}11 li span {width:10px;height: 10px;background-color:#cb3636; position: absolute;left: -24px;top: 15px;border-radius: 50%;}12 </style>13 </head>14 <body>15 <div class="line_box">16     <div class="line"></div>17     <ul>18         <li><i></i>就是这么帅，就是这么不要脸！就是这么帅，就是这么不要脸！<span></span></li>19         <li><i></i>没办法，就是这么帅，就是这么叼！<span></span></li>20         <li><i></i>帅到自然醒，帅到闪到腰！<span></span></li>21     </ul>22 </div>23 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js?1.1.11"></script>24 <script>25 $(function(){26 27 (function hei(){28 29     var li  = $("li"),30         len = li.length,31         he  = $(".line_box").outerHeight(),32         old = li.eq(len - 1).outerHeight();33 34     $(".line").height( Number(he) - Number(old) );35 36 }());37 38 })39 40 </script>41 </body>42 </html>

Copier après la connexion

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!