Maison >interface Web >js tutoriel >Utilisez jquery pour supprimer les lignes en tête et en queue de la timeline

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

巴扎黑original: 2017-06-26 14:35:261318parcourir

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>

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

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

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

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：plug-in de filigrane de page jquery, prend en charge les filigranes multilignes et l'échelonnement des lignesArticle suivant：plug-in de filigrane de page jquery, prend en charge les filigranes multilignes et l'échelonnement des lignes

Articles Liés

Voir plus