CSS之实现垂直时间线展示相关内容效果

如下，最近在工作中遇到实现时间线效果的需求，用纯css即可实现，下面给出详细实现代码。

　　

html：

 <div class="time_line_list_wrap hide">
             <ul class="time_line">
               <li>
                 <div class="time_line_item_wrap">
                   <span class="time">00:00:00</span>
                 </div>
               </li>
               <li class="time_line_item_tmpl">
                 <div class="time_line_item_wrap">
                   <span class="time"></span>
                   <div class="time_item_contain_wrap">
                     <img class="ppt_item_img_left">
                     <div class="item_contain_right">
                       <p class="ppt_name">中文课件名称超过了一定长度的字之后隐藏</p>
                       <span class="item_page_number">2/30</span>
                     </div>
                   </div>
                 </div>
               </li>
             </ul>
           </div>

css:（此处用的less语法）

 .time_line_list_wrap{
         width: 100%;
         height: 100%;
         overflow-y: scroll;
         overflow-x: hidden;
         background-color: #ffffff;
         padding:;
         flex-grow:;

         .time_line{
           padding: 16px 10px 0px 10px;
           li{
             list-style-type: none;
             position: relative;
             width: 2px;
             height: 102px;
             background-color: #e6e6e6;

             &.time_line_item_tmpl{
               display: none;
             }

             &:last-child{
               height: 0px;
             }

             &:first-child{
               height: 30px;
             }

             &:before{
               content: '';
               position: absolute;
               left: 50%;
               top:;
               transform: translateX(-50%);
               width: 8px;
               height: 8px;
               border-radius: 50%;
               background: inherit;
             }

             .time_line_item_wrap {
               width: 280px;
               margin-left: 10px;
               position: relative;
               bottom: 6px;

               &:last-child{
                 margin-bottom: 20px;
               }

               &:first-child{
                 margin-bottom: 0px;
               }

               .time{
                 display: inline-block;
                 width: 92px;
                 height: 20px;
                 line-height: 20px;
                 font-size: 12px;
                 color: #4a90e2;
                 box-sizing: border-box;
                 padding-left: 10px;
               }
               .time_item_contain_wrap{
                 display: flex;
                 padding: 10px 0 10px 9px;

                 .ppt_item_img_left{
                   width: 80px;
                   height: 62px;
                   object-fit: contain;
                   flex-shrink:;
                 }

                 .item_contain_right{
                   font-size: 12px;
                   color: #696969;
                   font-weight:;
                   margin-left: 8px;
                   width: 68%;

                   .ppt_name{
                     .text-autocut();
                   }
                 }
               }
             }
           }
         }

         &.hide{
           display: none;
         }
       }

js：

 const $timeLineUl = $('.time_line')
 const $timeLineItemTmpl = $('.time_line_item_tmpl').clone().removeClass('time_line_item_tmpl')

 // 初始化侧边栏中时间线数据
       for (let i = 0; i < slideInfo.length; i += 1) {
         const currentSlide = slideInfo[i]
         const $timeLineItem = $timeLineItemTmpl.clone()
         $timeLineItem.find('.time').text(formatTime(currentSlide.recordTime / 1000).join(':'))
         $timeLineItem.find('.time').css({
           background: `url(${triangleTimeStr}) no-repeat center`,
         })
         $timeLineItem.find('.ppt_item_img_left').attr('src', currentSlide.slideUrl)
         $timeLineItem.find('.ppt_name').text(currentSlide.slideName)
         $timeLineItem.find('.item_page_number').text(`${currentSlide.currentPageNumber}/${currentSlide.totalPageNumber}`)
         $timeLineUl.append($timeLineItem)
       }

注意此处，需要用find()方法来查找后代元素，.children()方法是查找直接后代（儿子辈）的元素，.find()方法是查找所有后代元素（包括儿子、孙子、孙子的孙子及更多）。