Ein Beispiel für das Entfernen der Kopf- und Endzeilen der Zeitleiste mithilfe von JQuery

Dieser Artikel führt Sie hauptsächlich in die Methode zum Entfernen der Kopf- und Endzeilen der Zeitachse ein. Der Artikel bietet einen gewissen Referenz- und Lernwert für alle Wenn Sie es benötigen, können Sie sich uns unten anschließen. Ich hoffe, es hilft allen.

Vorwort

Wenn ich früher eine Struktur ähnlich einer Zeitachse erstellt habe, war es fast immer eine graue Linie, die ohne Ende nach unten flog. Die heutige Linie reicht vom ersten bis zum letzten Punkt. Die Frage ist also: Die Höhe des Inhalts ist nicht festgelegt. Wie lässt sich die Länge der Linie bestimmen? Wie kann es vom ersten bis zum letzten Punkt durchgehend verbunden werden? Das passiert als nächstes.

Sehen Sie sich zuerst den Effekt an, wie unten gezeigt:

Ideen:

1. Schreiben Sie ein p, um den gesamten Inhalt einzuschließen, und Sie werden alles wissen. Die Gesamthöhe der Liste.

2. Schreiben Sie eine dünne Linie und positionieren Sie sie rechts. Ja, die Höhe beträgt 100 %. Die dünne Linie ist so hoch wie der Inhalt.

3. Der kleine Startpunktabstand. Wie hoch die Spitze ist, wie hoch die dünne Linie von oben ist;

4. Verwenden Sie js, um die Höhe der dünnen Linie = Gesamthöhe festzulegen - die Höhe der letzten Liste;

! ! ! Was? ? Kannst du nicht lesen? ? Egal, lassen Sie es mich in einem Satz zusammenfassen: Die Höhe der dünnen Linie minus der Höhe des letzten Inhalts ist genau richtig.

Implementierungsmethode

Schritt 1: Struktur schreiben

9a3b772af592cbd97df3864e894d786b
  4932cd0e4246f1060d9ad3ec2e132eda94b3e26ee717c64999d7867364b1b4a3
  ff6d136ddc5fdfeffaf53ff6ee95f185
   25edfb22a4f469ecb59f1190150159c65a8028ccc7a7e27417bff9f05adf593272ac96585ae54b6ae11f849d2649d9e6就是这么帅，就是这么不要脸！写多长都没关系，反正右边线条会自适应！45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114bed06894275b65c1ab86501b08a632eb
   25edfb22a4f469ecb59f1190150159c65a8028ccc7a7e27417bff9f05adf593272ac96585ae54b6ae11f849d2649d9e6没办法，就是这么帅，就是这么叼！45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114bed06894275b65c1ab86501b08a632eb
   25edfb22a4f469ecb59f1190150159c65a8028ccc7a7e27417bff9f05adf593272ac96585ae54b6ae11f849d2649d9e6帅到自然醒，帅到闪到腰！45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114bed06894275b65c1ab86501b08a632eb
  929d1f5ca49e04fdcb27f9465b944689
 94b3e26ee717c64999d7867364b1b4a3

　(1) Definieren Sie eine graue dünne Linie.line

　(2) Jeder Inhalt ist ein Li

(3) i ist das Dreieck (was?? Du kannst mit CSS kein Dreieck zeichnen? Baidu, du wirst es wissen)

(4) span ist das Kleine rot Klicken Sie auf

Schritt 2: Schreiben Sie den Stil

46d5fe1c7617e3914f214aaf043f4ccf
 .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%;}
531ac245ce3e4fe3d50054a55f265927

(1) Es scheint, als gäbe es nichts zu sagen. . .

　(2) Haha, ich habe darüber nachgedacht. Das Prinzip beim Zeichnen eines Dreiecks besteht darin, einen Rand auf Rot und die anderen drei Seiten auf Transparent zu setzen, wie folgt:

　border-color:transparent red transparent transparent; Die Richtungen sind oben, rechts, unten und links

Schritt 3: Js-Code schreiben

(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) Ermitteln Sie die Höhe der äußersten Ebene he

　(2) Ermitteln Sie die Höhe des letzten alten Inhalts

　(3) Die Gesamthöhe beträgt (1) - (2)

　(4) Der Grund, warum äußereHeight() hier verwendet wird, besteht darin, die Höhe der Polsterung und des Randes einzubeziehen

Zusammenfassung:

Dieses Mal verwenden wir die Gesamthöhe minus der Höhe des letzten Inhalts, um die Höhe der dünnen Linie zu berechnen, aber es ist am besten, eine Größenänderung zum Monitor hinzuzufügen Browser ändert und setzt ihn zurück. Die Höhe der dünnen Linie ist perfekter.

Hier wird Baidu CDN verwendet:

0f384ea6e94b217ed07230246ae7c49a2cacc6d41bbb37262a98f745aa00fbf0

Der vollständige Code lautet:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<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> 
</head> 
<body> 
<p> 
 <p></p> 
 <ul> 
  <li><i></i>就是这么帅，就是这么不要脸！就是这么帅，就是这么不要脸！<span></span></li> 
  <li><i></i>没办法，就是这么帅，就是这么叼！<span></span></li> 
  <li><i></i>帅到自然醒，帅到闪到腰！<span></span></li> 
 </ul> 
</p> 
<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> 
</body> 
</html>

Verwandte Empfehlungen:

AngularJS Teilen von Timeline-Effekten

Mehrere schöne Timeline-Tutorials implementiert mit Jquery

Analyse von Timeline-Effekten

Das obige ist der detaillierte Inhalt vonEin Beispiel für das Entfernen der Kopf- und Endzeilen der Zeitleiste mithilfe von JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!