Use jquery to remove lines at the head and tail of the timeline-JS Tutorial-php.cn

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

巴扎黑

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

Original

1287 people have browsed it

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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!