Use jquery to remove lines at the head and tail of the timeline

1. Introduction: In the past, when I made structures similar to the time axis, it was almost always a gray line flying down without an end. Today's line is from the first dot to the last dot. So the question is, the height of the content is not fixed. How to determine the length of the line? How can it be connected end to end from the first point to the last point? That's what happens next.

2. Take a look at the effect first, as shown below:

3. Ideas:

1. Write a div to wrap the entire content. You can know the total height of all lists;

　2. Write a thin line and position it to the right, yes, the height is 100%. The thin line will be as high as the content;

　3. Start How high the small dot is from the top is how high the thin line is from the top;

4. Use js to set the height of the thin line = total height - the height of the last list;

! ! ! What? ? can't read? ? It doesn't matter, let me sum it up in one sentence: the height of the thin line minus the height of the last content is just right.

4. The first step: write the structure

1     <div>2         <div></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) Define a gray thin line.line

　(2) Each content is A li

　(3) i is the triangle (What?? You can’t draw a triangle with CSS? Baidu, you will know)

　(4) span is the little red dot

5. Step 2: Write the style

1 <style>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) It seems that there is nothing to say. . .

　(2) Haha, I thought of it. The principle of drawing a triangle is to set one border to red and set the other three sides to transparent, like this:

　　border-color:transparent red transparent transparent; The directions are up, right, bottom, left

6. Step 3: Write js code

 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) Get the height of the outermost layer he

　(2) Get the height of the last content old

　(3) The total height is (1) - (2)

　(4) The reason why outerHeight() is used here is to include the height of padding and border.

7. Final summary:

This time, we use the total height minus the height of the last content to calculate the height of the thin line. Of course, there are other methods, but it is best to add A resize monitors browser changes and resets the height of the thin line, which is more perfect.

Use Baidu CDN here:

The complete code is:

 1 nbsp;html> 2  3  4 <meta> 5 <style> 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 14 15 <div>16     <div></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></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 42 

The above is the detailed content of Use jquery to remove lines at the head and tail of the timeline. For more information, please follow other related articles on the PHP Chinese website!