Remove the line at the end of the time axis head using jquery.

Remove the line at the end of the time axis head using jquery.

I. Preface: In the past, the structure similar to the time axis was almost always a gray line flying down and there was no end. Today, this line is from the first dot to the last dot. The problem is that the height of the content is not fixed. How can we determine the length of the line? How can we just connect from the first point to the end of the last point? This is what we need to do.

2. Check the effect first, for example:

Iii. Ideas:

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

2. Write a thin line to locate it on the right, right. The height is 100%. How high is the content and how high is the thin line;

3. The starting point is as high as the top point, and the line is as high as the top point;

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

!!! What ?? Why not ?? It doesn't matter, so I sum it into one sentence: the height of the line minus the height of the last content is just right.

4. Step 1: Write the structure

1 <div class = "line_box"> 2 <div class = "line"> </div> 3 <ul> 4 <li> <I> </I>, that's all! It doesn't matter how long it is written. The lines on the right are adaptive! <Span> </li> 5 <li> <I> </I> No way. It's so handsome, it's so embarrassing! <Span> </li> 6 <li> <I> </I> the handsome guy wakes up naturally, and the handsome guy flashes to the waist! <Span> </li> 7 </ul> 8 </div>

(1) set a gray line. line

(2) Each content is a li

(3) I is the triangle (what ?? Do not draw triangles with CSS? Baidu, you will know)

(4) span is the little red dot.

Step 2: Write 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) There seems to be nothing to say...

(2) Haha, think of it. The principle of triangle painting is to set a border to red, and the other three sides to transparent, just like this:

Border-color: transparent red transparent; the direction is top right bottom left

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) obtain the height of the outermost layer.

(2) obtain the height of the last content, old

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

(4) outerHeight () is used to calculate the height of padding and border.

VII. Summary:

This time we use the total height minus the height of the last content to calculate the height of the line. Of course there are other methods, however, it is better to add a resize listener to listen to browser changes and then reset the height of the line to be more complete.

Use Baidu CDN here: <script type = "text/javascript" src = "http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>

The complete code is:

1 <! DOCTYPE html> 2