jQuery+swiper コンポーネントはタイムラインのスライド年タブ切り替え効果を実現します

jQuery+swiper コンポーネントはタイムラインのスライド年タブ切り替え効果を実現します

結果：

実装コード: スワイパーコンポーネントと一緒に使用する必要があります

Swiper 基本デモアドレス:

https://www.swiper.com.cn/demo/index.html

HTML:

<div class="スワイパーコンテナボックス">
    <div class="スワイパーラッパーメインタイムライン">
      <div class="スワイパースライドタイムラインfd-active-line">
        <a href="javascript:void(0);" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" class="timeline-content">
          <div class="タイムライン-年">
            2019年
          </div>
        </a>
        <div class="xians"></div>
      </div>
      <div class="スワイパースライドタイムライン">
        <a href="javascript:void(0);" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" class="timeline-content">
          <div class="タイムライン-年">
            2018年
          </div>
        </a>
        <div class="xians"></div>
      </div>
      <div class="スワイパースライドタイムライン">
        <a href="javascript:void(0);" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" class="timeline-content">
          <div class="タイムライン-年">
            2017年
          </div>
        </a>
        <div class="xians"></div>
      </div>
      <div class="スワイパースライドタイムライン">
        <a href="javascript:void(0);" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" class="timeline-content">
          <div class="タイムライン-年">
            2016年
          </div>
        </a>
        <div class="xians"></div>
      </div>
      <div class="スワイパースライドタイムライン">
        <a href="javascript:void(0);" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" class="timeline-content">
          <div class="タイムライン-年">
            2015年
          </div>
        </a>
        <div class="xians"></div>
      </div>
      <div class="スワイパースライドタイムライン">
        <a href="javascript:void(0);" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" rel="外部nofollow" class="timeline-content">
          <div class="タイムライン-年">
            2014年
          </div>
        </a>
        <div class="xians"></div>
      </div>
    </div>
  </div>
  <ul class="イベントリスト">
    <div>
      <h3 id="2012">2019</h3>
      <img src="./img/lh.jpg" alt="">
    </div>
    <div style="display: none;">
      <h3 id="2012">2018</h3>
      <img src="./img/lhls.jpg" alt="">
    </div>
    <div style="display: none;">
      <h3 id="2011">2017</h3>
      <img src="./img/lkss.jpg" alt="">
    </div>
    <div style="display: none;">
      <h3 id="2011">2016</h3>
      <img src="./img/luhu.jpg" alt="">
    </div>
    <div style="display: none;">
      <h3 id="2011">2015</h3>
      <img src="./img/luhuwhite.jpg" alt="">
    </div>
    <div style="display: none;">
      <h3 id="2011">2014</h3>
      <img src="./img/lhls.jpg" alt="">
    </div>
  </ul>
  </div>

所需外部鏈接文件：

<script src="js/jquery.min_v1.0.js" type="text/javascript"></script>
  <script src="js/swiper-bundle.min.js" type="text/javascript"></script>
  <link rel="スタイルシート" href="css/swiper-bundle.min.css" rel="外部nofollow" >

CS

.ページ {
  幅: 100%;
}
 
.メインタイムライン{
  フォントファミリー: 'Roboto'、サンセリフ;
  幅: 200ピクセル;
  位置: 相対的;
  フロート: 左;
}
 
.main-timeline:after {
  コンテンツ： '';
  表示: ブロック;
  クリア: 両方;
}
 
.main-timeline:before {
  /* コンテンツ： '';
  高さ: calc(100% + 80px);
  幅: 0px;
  境界線: 2px 実線 #0870C5;
  変換: translateX(-50%);
  位置: 絶対;
  左: 114px;
  上: 0px; */
}
 
.メインタイムライン .タイムライン {
  幅: 4%;
  /* パディング: 140px 70px 0 25px; */
  マージン: 0 50px 0 0;
  フロート: 左;
  位置: 相対的;
}
 
.メインタイムライン .タイムラインコンテンツ {
  /* パディング: 15px 15px 15px 40px;
  境界線: 2px 実線 #00A79B; */
  境界線の半径: 15px 0 15px 15px;
  表示: ブロック;
  位置: 相対的;
}
 
.main-timeline .timeline-content:hover {
  テキスト装飾: なし;
}
 
.fd-active-line .timeline-content:after {
  コンテンツ： '';
  背景色: #00A79B;
  高さ: 18px;
  幅: 15px;
  位置: 絶対;
  右: -43px;
  上: 27px;
  /* クリップパス: ポリゴン(100% 0, 0 0, 0 100%); */
}
 
.メインタイムライン .タイムライン年 {
  色: #fff;
  背景色: #00A79B;
  フォントサイズ: 24px;
  フォントの太さ: 900;
  テキスト配置: 中央;
  行の高さ: 80px;
  高さ: 80px;
  幅: 80ピクセル;
  境界線の半径: 50%;
  位置: 絶対;
  右: -120px;
  上: -40px;
}
 
.main-timeline .timeline-year:after {
  コンテンツ： '';
  高さ: 100px;
  幅: 100ピクセル;
  境界線: 8px 実線 #00A79B;
  左境界線の色: 透明;
  境界線の半径: 50%;
  変換: translateX(-50%) translateY(-50%) 回転(-20deg);
  位置: 絶対;
  左: 50%;
  上位: 50%;
}
 
.メインタイムライン .タイムラインアイコン {
  色: #fff;
  背景色: #00A79B;
  フォントサイズ: 35px;
  テキスト配置: 中央;
  行の高さ: 50px;
  高さ: 50px;
  幅: 50px;
  境界線の半径: 50%;
  変換: translateY(-50%);
  位置: 絶対;
  上位: 50%;
  左: -25px;
  遷移: すべて 0.3 秒;
}
 
.メインタイムライン.タイトル{
  色: #222;
  フォントサイズ: 20px;
  フォントの太さ: 900;
  テキスト変換:大文字;
  文字間隔: 1px;
  マージン: 0 0 7px 0;
}
 
.メインタイムライン .説明 {
  色: #222;
  フォントサイズ: 15px;
  文字間隔: 1px;
  テキスト配置: 両端揃え;
  マージン: 0 0 5px;
}
 
.main-timeline .timeline:nth-child(even) .timeline-content {}
 
.main-timeline .timeline:nth-child(even) .timeline-content:after {
  変換: rotateY(180deg);
  右: 自動;
  左: 123px;
}
 
.main-timeline .timeline:nth-child(even) .timeline-year:after {
  変換: translateX(-50%) translateY(-50%) 回転(200度);
}
 
.main-timeline .timeline:nth-child(even) .timeline-icon {
  左: 自動;
  右: -25px;
}
 
.timeline:n番目の子(4n+2) .timeline-content,
.timeline:n番目の子(4n+2) .timeline-year:after {
  境界線の色: #9E005D;
}
 
.timeline:n番目の子(4n+2) .timeline-year:after {
  左境界線の色: 透明;
}
 
.timeline:n番目の子(4n+2) .timeline-content:after,
.timeline:n番目の子(4n+2) .timeline-icon,
.timeline:n番目の子(4n+2) .timeline-year {
  背景色: #9E005D;
}
 
.timeline:n番目の子(4n+3) .timeline-content,
.timeline:n番目の子(4n+3) .timeline-year:after {
  境界線の色: #f24f0e;
}
 
.timeline:n番目の子(4n+3) .timeline-year:after {
  左境界線の色: 透明;
}
 
.timeline:n番目の子(4n+3) .timeline-content:after,
.timeline:n番目の子(4n+3) .timeline-icon,
.timeline:n番目の子(4n+3) .timeline-year {
  背景色: #f24f0e;
}
 
.timeline:n番目の子(4n+4) .timeline-content,
.timeline:n番目の子(4n+4) .timeline-year:after {
  境界線の色: #0870C5;
}
 
.timeline:n番目の子(4n+4) .timeline-year:after {
  左境界線の色: 透明;
}
 
.timeline:n番目の子(4n+4) .timeline-content:後、
.timeline:n番目の子(4n+4) .timeline-icon,
.timeline:n番目の子(4n+4) .timeline-year {
  背景色: #0870C5;
}
 
@media スクリーンと (最大幅:767px) {
  .main-timeline:before {
    表示: なし;
  }
 
  .メインタイムライン .タイムライン {
    幅: 100%;
    パディング上部: 80px;
    右パディング: 12px;
    下マージン: 20px;
  }
 
  .main-timeline .timeline:nth-child(even) {
    左パディング: 10px;
    パディング上部: 80px;
    下マージン: 20px;
  }
 
  .メインタイムライン .タイムラインコンテンツ、
  .main-timeline .main-timeline .timeline:nth-child(even) .timeline-content {
    背景色: #fff;
    パディング上部: 25px;
  }
 
  .main-timeline .timeline-content:after {
    表示: なし;
  }
 
  .メインタイムライン .タイムライン年 {
    フォントサイズ: 24px;
    行の高さ: 70px;
    高さ: 70px;
    幅: 70ピクセル;
    右: 0;
    上: -65px;
  }
 
  .main-timeline .timeline-year:after {
    表示: なし;
  }
 
  .main-timeline .timeline:nth-child(even) .timeline-year {
    左: 3px;
  }
}
 
@media スクリーンと (最大幅:567px) {
  .メインタイムライン.タイトル{
    フォントサイズ: 18px;
  }
}
 
.スワイパーコンテナ{
  幅: 205ピクセル;
  高さ: 500px;
  フロート: 左;
}
 
.スワイパースライド{
  テキスト配置: 中央;
  フォントサイズ: 18px;
  背景: #fff;
 
  /* スライドのテキストを垂直に中央揃えにする */
  ディスプレイ: -webkit-box;
  ディスプレイ: -ms-flexbox;
  ディスプレイ: -webkit-flex;
  ディスプレイ: フレックス;
  -webkit-box-pack: 中央;
  -ms-flex-pack: 中央;
  中央揃え
  コンテンツの中央揃え: 中央;
  -webkit-box-align: 中央;
  -ms-flex-align: 中央;
  -webkit-align-items: 中央;
  アイテムの位置を中央揃えにします。
}
 
@media (最大幅: 760px) {
  .スワイパーボタンの次へ{
    右: 20px;
    変換: 回転(90度);
  }
 
  .スワイパーボタン前へ{
    左: 20px;
    変換: 回転(90度);
  }
}
.イベントリスト画像{
  幅: 880ピクセル;
  高さ: 470ピクセル;
  オブジェクトフィット: カバー;
}
.xians {
  幅: 3px;
  高さ: 100%;
  背景: #0870C5;
  位置: 絶対;
  左: 82px;
  Zインデックス: -1;
}

js:

 <スクリプト>
    $(関数() {
      $(".main-timeline .timeline").click(function () {
        var TAG = $(this).siblings().length;
        タグ >= 1 の場合
          var インデックス = $(this).index()
          $(this).addClass('fd-active-line').siblings().removeClass('fd-active-line')
          $(this).parent().parent().siblings('.event_list').children().eq(index).show().siblings().hide()
        }
      })
      var swiper = new Swiper('.swiper-container', {
        スライド数: 4,
        方向: '垂直'、
        ナビゲーション:
          nextEl: '.swiper-button-next',
          前へ: '.swiper-button-prev',
        },
        の上： {
          サイズ変更: 関数 () {
            スワイパーの方向を変更します。
          }
        }
      });
    });
  </スクリプト>

jQuery を使用してタイムラインのスライド年タブ切り替えを実装する方法 (タイムラインのスライド効果を実現するスワイパー コンポーネントを使用) に関するこの記事はこれで終わりです。より関連性の高い jQuery タイムライン スライド切り替えコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • jQuery マウスオーバー水平タイムラインスタイル (コード詳細説明)
  • JQuery を使用して、美しく実用的なタイムラインをいくつか実装します (サンプル コード付き)
  • JQuery タイムライン エフェクト (3 つの異なるタイプ)
  • jQuery アダプティブカルーセルプラグイン Swiper の使用例

<<:  HTML タグのコンテンツを編集するには、contenteditable 属性を設定します (textarea を置き換えることができます)

>>:  DockerにRedisコンテナをインストールするための実装手順

推薦する

MySQL ページングクエリ最適化テクニック

ページング クエリを使用するアプリケーションでは、LIMIT と OFFSET を含むクエリが非常に...

VueのkeepAliveコンポーネントの機能と使い方の詳細な説明

序文面接中、多くの面接官は「keep-alive が何をするのか知っていますか?」と質問する際に V...

nginxリバースプロキシのyum設定の詳細な手順

パート0 背景社内のイントラネットサーバーは直接インターネットにアクセスすることはできませんが、外部...

一目でわかる$nextTickの説明

目次1. 機能説明2. 親コンポーネント3. サブコンポーネント NextTick.vue 4なぜ未...

line-height=height要素の高さだがテキストが垂直方向に中央揃えされない問題を解決する

まず、行の高さが要素の高さと等しい場合にテキストが垂直方向に中央揃えにならない理由を説明します。実際...

Vueデータ割り当て問題の解決

私が長い間遭遇してきた問題を要約してみましょう。プロジェクトでは、フロントエンドをレンダリングするた...

MySQL の自己結合重複排除に関する注意事項

機能シナリオを簡単に説明しましょう。データ行フィールドは次のとおりです。名前開始日時タイプこの表では...

0.1秒の価値！フロントエンドのウェブページの高速化の問題について簡単に説明します

私が現在の仕事の面接を受けたとき、リーダーが真剣にこう言っていたのを覚えています。「今の世の中はイン...

Webpackプラグインを書いてnpmに公開するための80行のコード

1. はじめに最近、 Webpackの原理を勉強しています。これまでは Webpack の設定方法し...

Nodejs プラグインと使用方法の概要

このチュートリアルの動作環境: Windows 7 システム、nodejs バージョン 12.19....

CSS3に基づいてiPhoneを描く

結果：実装コードhtml <div class='iphone'> &l...

Vue での this.$set の使用に関する詳細な説明

目次Vue での this.$set の使用使用なぜレスポンシブなのか?分析する要約するVue での...

JS配列重複排除の詳細

目次1 テストケース2 JS配列重複排除4種類2.1 要素の比較2.1.1 二重層 for ループ比...

Vue の better-scroll コンポーネントを使用して水平スクロール機能を実現する

について最近、Vue を学習する過程で、基本的な知識の練習と強化を目的として、Qunar.com の...

MySQL 8.0.20 のインストールと設定の詳細なチュートリアル

この記事では、MySQL 8.0.20のインストールと設定方法についての詳細なチュートリアルを参考ま...