Verwenden Sie JQuery, um Zeilen am Anfang und Ende der Zeitleiste zu entfernen-js-Tutorial-php.cn

Verwenden Sie JQuery, um Zeilen am Anfang und Ende der Zeitleiste zu entfernen

巴扎黑

Freigeben： 2017-06-26 14:35:26

Original

1292 Leute haben es durchsucht

1. Einleitung: Wenn ich in der Vergangenheit Strukturen ähnlich der 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.

Zweitens schauen Sie sich zunächst den Effekt an, wie unten gezeigt:

Drittens Ideen:

1. Schreiben Sie ein Div, das umbrochen werden soll der gesamte Inhalt.

2. Schreiben Sie eine dünne Linie und positionieren Sie sie rechts. Die dünne Linie ist so hoch wie die Inhalt ist;

3. Start Die dünne Linie ist so hoch wie die Spitze von oben

4. Verwenden Sie js, um die Höhe der dünnen Linie festzulegen = Gesamthöhe – die Höhe von die letzte 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.

IV. Schritt 1: Schreiben Sie die Struktur

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>

Nach dem Login kopieren

　(1) Definieren Sie eine graue dünne Linie

　(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

5. Schritt 2: Schreiben Sie den Stil

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>

Nach dem Login kopieren

　(1) Es scheint, dass es nichts zu sagen gibt. . .

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

6. Schritt 3: JS-Code schreiben

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

Nach dem Login kopieren

　(1) Ermitteln Sie die Höhe der äußersten Ebene

　(2) Ermitteln Sie die letzter Inhalt Die Höhe von alt

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

　(4) Der Grund, warum hier äußereHeight() verwendet wird, besteht darin, die Höhe von zu ermitteln Polsterung und Rand gleich Zählen in

7. Abschließende Zusammenfassung:

Diesmal wird die Höhe der dünnen Linie berechnet, indem die Höhe des letzten Inhalts von der Gesamthöhe abgezogen wird , es gibt andere Methoden, aber am besten wäre es, eine Größenänderung hinzuzufügen, um Browseränderungen zu überwachen und die Höhe der dünnen Linie zurückzusetzen.

Baidu CDN wird hier verwendet:

Der vollständige Code lautet:

 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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonVerwenden Sie JQuery, um Zeilen am Anfang und Ende der Zeitleiste zu entfernen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!