jquery를 사용하여 타임라인의 머리 부분과 끝 부분에 있는 줄을 제거합니다.-JS 튜토리얼-php.cn

1. 소개: 예전에는 시간축과 비슷한 구조를 만들면 거의 항상 끝없이 날아가는 회색 선이었습니다. 오늘의 선은 첫 번째 점부터 마지막 점까지입니다. 그러면 내용의 높이가 고정되어 있지 않습니다. 선의 길이는 어떻게 결정됩니까? 첫 번째 지점부터 마지막 지점까지 끝과 끝을 어떻게 연결할 수 있나요? 그것이 다음에 일어나는 일입니다.

둘째, 아래와 같이 먼저 효과를 살펴보세요.

세 가지 아이디어:

　1. 전체 콘텐츠를 감싸는 div를 작성하면 모든 목록의 전체 높이를 알 수 있습니다. . 위치 지정을 위한 가는 선 작성 오른쪽으로 가세요. 높이는 100%입니다.

　3. 가는 선은 시작점만큼 높아집니다. top;

　4. js를 사용하여 얇은 선 설정 높이 = 전체 높이 - 마지막 목록의 높이

　　! ! ! 무엇? ? 읽을 수 없나요? ? 상관없습니다. 한 문장으로 요약하겠습니다. 가는 선의 높이에서 마지막 내용의 높이를 뺀 값이 딱 맞습니다.

4. 첫 번째 단계: 구조 작성

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>

로그인 후 복사

　(1) 얇은 회색 선을 정의합니다.line

　(2) 각 콘텐츠는 li

　(3) 나는 삼각형입니다(뭐?? 아니요 CSS로 삼각형을 그리는 방법을 아시나요? Baidu에서 검색해 보세요.

　　(4) 범위는 작은 빨간 점입니다

5. 2단계: 스타일 쓰기

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) 있는 것 같습니다. 할 말이 없을 정도로. . .

　(2) 하하, 생각해보니. 삼각형을 그리는 원리는 다음과 같이 테두리 하나를 빨간색으로 설정하고 나머지 세 변을 투명하게 설정하는 것입니다.

　　　border-color:transparent red transparent transparent; 방향은 위, 오른쪽, 아래, 왼쪽입니다

6. 3단계: js 코드 작성

 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) 가장 바깥쪽 레이어의 높이를 가져옵니다. he

　　(2) 그런 다음 마지막 콘텐츠의 높이를 가져옵니다. old

　　(3) 전체 높이는 (1) - ( 2)

(4) 여기서 innerHeight()를 사용하는 이유는 패딩과 테두리의 높이를 포함하기 위함입니다. 7. 최종 요약:

이번에는 전체 높이에서 마지막 콘텐츠의 높이를 뺀 값을 사용합니다. 가는 선 높이 물론 다른 방법도 있지만 브라우저 변경 사항을 모니터링하고 가는 선의 높이를 재설정하는 크기 조정을 추가하는 것이 더 완벽합니다.

　Baidu CDN은 여기에서 사용됩니다:

저자별 최신 기사