jqueryを使ってタイムラインの先頭と末尾の行を削除する-jsチュートリアル-php.cn

1. はじめに: 以前は、時間軸に似た構造を作成する場合、ほとんどの場合、終わりなく飛んでいる灰色の線でした。今日の線は最初のドットから最後のドットまでです。そこで質問は、コンテンツの高さは固定されていません。線の長さをどのように決定するかです。最初の点から最後の点まで端から端まで接続するにはどうすればよいでしょうか?それが次に起こることです。

2 番目に、以下に示すように、最初に効果を確認します。

3 つのアイデア:

1. コンテンツ全体をラップする div を書くと、すべてのリストの合計の高さがわかります

2。 . 位置決め用の細い線を書きます。右に進みます。はい、高さは 100% です。細い線は、開始点と同じ高さになります。 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) 細い灰色の線を定義します

(2) 各コンテンツは li

(3) i は三角形です (何?? いいえ) CSSで三角形を描く方法を知っていますか？Baiduで検索すればわかります）

（4）spanは小さな赤い点です

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)ははは、思いつきました。三角形を描画する原理は、次のように、1 つの境界線を赤に設定し、他の 3 つの辺を透明に設定することです。ステップ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) 最外層の高さを取得

(2) 次に最後のコンテンツoldの高さを取得

(3) 全体の高さは(1) - ( 2)

(4) ここで、outerHeight() を使用するのは、パディングとボーダーの高さを含めるためです。 7. 最終まとめ:

今回は、合計の高さから最後のコンテンツの高さを引いた値を使用して計算します。細い線の高さ、もちろん他の方法もありますが、ブラウザの変更を監視するためにサイズ変更を追加し、細い線の高さをリセットする方がより完璧です。

ここでは Baidu CDN が使用されています:

著者別の最新記事