집 > 기사 > 웹 프론트엔드 > jquery를 사용하여 타임라인의 헤드 라인과 테일 라인을 제거하는 방법의 예

jquery를 사용하여 타임라인의 헤드 라인과 테일 라인을 제거하는 방법의 예

小云云원래의: 2018-01-06 13:33:011393검색

이 글에서는 jquery를 사용하여 시간 축의 머리 부분과 끝 부분을 제거하는 방법을 주로 소개합니다. 이 글은 여러분의 참고와 학습을 위한 자세한 예제 코드를 제공합니다. 아래를 살펴보세요. 그것이 모두에게 도움이 되기를 바랍니다.

서문

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

먼저 효과를 보면 아래와 같습니다:

아이디어:

　1. 전체 내용을 감싸도록 p를 작성하면 모든 목록의 전체 높이를 알 수 있습니다.

　2. 가는 선을 작성합니다. , 높이 100%일 때, 내용이 높은 만큼 얇은 선이 그 만큼 높아집니다.

　3. 시작점이 위에서부터 높은 만큼 얇은 선이 그 만큼 높아집니다.

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

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

구현 방법

1단계: 구조 작성

9a3b772af592cbd97df3864e894d786b
  4932cd0e4246f1060d9ad3ec2e132eda94b3e26ee717c64999d7867364b1b4a3
  ff6d136ddc5fdfeffaf53ff6ee95f185
   25edfb22a4f469ecb59f1190150159c65a8028ccc7a7e27417bff9f05adf593272ac96585ae54b6ae11f849d2649d9e6就是这么帅，就是这么不要脸！写多长都没关系，反正右边线条会自适应！45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114bed06894275b65c1ab86501b08a632eb
   25edfb22a4f469ecb59f1190150159c65a8028ccc7a7e27417bff9f05adf593272ac96585ae54b6ae11f849d2649d9e6没办法，就是这么帅，就是这么叼！45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114bed06894275b65c1ab86501b08a632eb
   25edfb22a4f469ecb59f1190150159c65a8028ccc7a7e27417bff9f05adf593272ac96585ae54b6ae11f849d2649d9e6帅到自然醒，帅到闪到腰！45a2772a6b6107b401db3c9b82c049c254bdf357c58b8a65c66d7c19c8e4d114bed06894275b65c1ab86501b08a632eb
  929d1f5ca49e04fdcb27f9465b944689
 94b3e26ee717c64999d7867364b1b4a3

　(1) 회색 가는 선을 정의합니다.line

　(2) 각 콘텐츠는 li

　(3) 나는 삼각형입니다(뭐?? No Do) CSS로 삼각형을 그리는 방법을 아시나요? Baidu에서 검색하면 알 수 있습니다.)

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

2단계: 스타일 쓰기

46d5fe1c7617e3914f214aaf043f4ccf
 .line_box {width: 200px;margin: 0 auto;position: relative;}
 .line {width: 2px;height: 100%;background-color: #ccc;position: absolute;left: 0;top: 20px;}
 ul {padding-left: 20px;}
 li { padding: 10px;background-color: #cb3636;color: #fff;position: relative;margin-bottom: 20px;}
 li i {border: 10px solid;border-color:transparent #cb3636 transparent transparent;position: absolute;left: -18px;top: 10px;}
 li span {width:10px;height: 10px;background-color:#cb3636; position: absolute;left: -24px;top: 15px;border-radius: 50%;}
531ac245ce3e4fe3d50054a55f265927

　　(1) 할 말이 없는 것 같습니다. . . .

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

　　　border-color:투명 빨간색 투명 투명 방향은 위, 오른쪽, 아래, 왼쪽입니다

Step 3: js 코드 작성

(function hei(){

 var li = $("li"),
  len = li.length,
  he = $(".line_box").outerHeight(),
  old = li.eq(len - 1).outerHeight();

 $(".line").height( Number(he) - Number(old) );

}());

　　(1) 가장 바깥쪽 레이어의 높이를 구합니다. he

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

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

　　(4) 여기에서 innerHeight()를 사용하는 이유는 패딩과 테두리의 높이를 포함하기 위해서입니다.

요약:

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

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

0f384ea6e94b217ed07230246ae7c49a2cacc6d41bbb37262a98f745aa00fbf0

전체 코드:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<style type="text/css"> 
.line_box {width: 200px;margin: 0 auto;position: relative;} 
.line {width: 2px;height: 100%;background-color: #ccc;position: absolute;left: 0;top: 20px;} 
ul {padding-left: 20px;} 
li { padding: 10px;background-color: #cb3636;color: #fff;position: relative;margin-bottom: 20px;} 
li i {border: 10px solid;border-color:transparent #cb3636 transparent transparent;position: absolute;left: -18px;top: 10px;} 
li span {width:10px;height: 10px;background-color:#cb3636; position: absolute;left: -24px;top: 15px;border-radius: 50%;} 
</style> 
</head> 
<body> 
<p> 
 <p></p> 
 <ul> 
  <li><i></i>就是这么帅，就是这么不要脸！就是这么帅，就是这么不要脸！<span></span></li> 
  <li><i></i>没办法，就是这么帅，就是这么叼！<span></span></li> 
  <li><i></i>帅到自然醒，帅到闪到腰！<span></span></li> 
 </ul> 
</p> 
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 
<script> 
$(function(){ 
 
(function hei(){ 
 
 var li = $("li"), 
  len = li.length, 
  he = $(".line_box").outerHeight(), 
  old = li.eq(len - 1).outerHeight(); 
 
 $(".line").height( Number(he) - Number(old) ); 
 
}()); 
 
}) 
 
</script> 
</body> 
</html>

jquery를 사용하여 타임라인의 헤드 라인과 테일 라인을 제거하는 방법의 예

관련 기사