【Jqueryビッグイベントタイムライン】jqueryがビッグイベントタイムライン(時間軸)のスクロール切り替え効果を「完全なソースコードで」実現

プログラミング 2023-08-15 21:02:00 訪問数: null

記事ディレクトリ

前に書いてある

実際、この種の主要なイベント レコードの Web ページも、特に時間ディメンションを持つビジネス データの場合によく見られます。もちろん、今日は私が主に会社のビジネスに携わっているわけではありません。個人的に良い例を見たので、シェアしましょう、先週は怠けて記事を更新しなかったので、ゆっくり埋めていきましょう。

関係する知識ポイント

Jquery で大きなイベントのタイムライン効果を実現する、フロントエンドで見栄えの良い明確なタイムライン効果を実現する方法、タイムライン ページ効果を実現する方法、jquery に基づいて大きなイベントのタイムライン効果を実現する、タイムライン コードの水平スクロールjQuery でのエンタープライズ開発の大きなイベントの様子。
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。

ページ効果

実際、これは、より多くの人がこの記事を読み続けるかどうかを選択できるようにするためであり、すべての人にとって必要なデモを正確に見つけることができるようにするためです。記事の最後には、完全なコード パッケージのダウンロード リンクがあります。
ここに画像の説明を挿入

1. 枠組みを構築する

もちろん、フレームワーク構築の核心は、フレームワークを複数のモジュールに分割する方法と同じように、そのコンポーネントを知ることです。そのため、私はこの効果を達成するためにモジュールの配置方法を使用します。

1.1 モジュールの構成

まずモジュールを分割し、1つのコンテナ内に2つの小さなコンテナを記述し、その年の時間軸と特定の月の時間軸をそれぞれ配置します。フレームは次のようになります。
ここに画像の説明を挿入

1.2 コンテンツの充填

最初のモジュールは、15 年から 23 年までの今年のタイムラインを書きたかったので、次のようにイベント ラインの効果に背景画像を使用し、背景画像に複数の円を接続してタイムラインの効果を形成しました。 :
ここに画像の説明を挿入

2 番目のモジュールの中心は、垂直のイベント タイムラインを描画することです。上部に小さなバブル効果を追加し、特定の月のタイムラインに border 属性を使用しました。before 属性を border-right: 1px 破線に設定します
。 #ff8d3d; 線の効果を実現するために、小さな円にはアイコンの小さな画像を使用しますが、実際には背景属性も設定します。設定は次のとおりです。
ここに画像の説明を挿入

1.3 タイムラインの切り替え

この機能は主にjsで関連するロジックを記述することで制御されており、左右クリックによる吹き出しのステータス切り替えと以下の内容の同期変化を主な実装として、アニメーション機能と切り替え機能が核心となります。 dom要素の表示と非表示。コアの js コードは次のとおりです。

function tags(num){
    
    
    $('.timer-scale-cont').eq(num).addClass('hov').siblings().removeClass('hov');
    $('.shaft-detail-cont').eq(num).show().siblings().hide();
}
function moveL(num, len) {
    
    
    if (num < len) {
    
    
        moveLeft = -num * space;
        $('.timer-scale').animate({
    
    left:moveLeft}, 700);
    }
}

版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。

2. 完全なコード

このデモは jquery に基づいているため、jquery コンポーネントを導入する必要があることに注意してください。

2.1 HTMLソースコード

<!-- 更多内容可关注CSDN博主《拄杖盲学轻声码》 -->
	<div class="body-box">
		<div class="timer-shaft-box">
			<div class="timer-shaft">
				<div class="timer-left"></div>
				<div class="timer-right"></div>
				<div class="timer-scale">
					<div class="timer-scale-cont hov">
						<p class="time-circle">2015</p>
						<p class="line-scale"></p>
					</div>
					<div class="timer-scale-cont">
						<p class="time-circle">2016</p>
						<p class="line-scale"></p>
					</div>
					<div class="timer-scale-cont">
						<p class="time-circle">2017</p>
						<p class="line-scale"></p>
					</div>
					<div class="timer-scale-cont">
						<p class="time-circle">2018</p>
						<p class="line-scale"></p>
					</div>
					<div class="timer-scale-cont">
						<p class="time-circle">2019</p>
						<p class="line-scale"></p>
					</div>
					<div class="timer-scale-cont">
						<p class="time-circle">2020</p>
						<p class="line-scale"></p>
					</div>
					<div class="timer-scale-cont">
						<p class="time-circle">2021</p>
						<p class="line-scale"></p>
					</div>
					<div class="timer-scale-cont">
						<p class="time-circle">2022</p>
						<p class="line-scale"></p>
					</div>
					<div class="timer-scale-cont">
						<p class="time-circle">2023</p>
						<p class="line-scale"></p>
					</div>
				</div>
			</div>
			<div class="timer-shaft-content">
				<div class="shaft-detail-cont" style="display: block;">
					<p class="timer-year"><i class="icon-year"></i><span>2015年</span></p>
					<div class="month-detail-box">
						<span class="month-title">1月</span>
						<p class="incident-record">
							1月21日、22日，CSDN博主-【拄杖盲学轻声码】，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大
						</p>
					</div>
					<div class="month-detail-box">
						<span class="month-title">2月</span>
						<p class="incident-record">
							2月1日，CSDN博主-【拄杖盲学轻声码】，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大<a
								href="#">
								<查看详情>
							</a></p>
					</div>
					<div class="month-detail-box">
						<span class="month-title">3月</span>
						<p class="incident-record">
							3月8日，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大
						</p>
						<p class="incident-record">
							3月10日，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大<a
								href="#">
								<查看详情>
							</a></p>
					</div>
					<div class="month-detail-box">
						<span class="month-title">4月</span>
						<p class="incident-record">
							4月1日，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大<a
								href="#">
								<查看详情>
							</a></p>
					</div>
					<div class="month-detail-box">
						<span class="month-title">5月</span>
						<p class="incident-record">
							5月11日，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大<a
								href="#">
								<查看详情>
							</a></p>
					</div>
					<div class="month-detail-box">
						<span class="month-title">6月</span>
						<p class="incident-record">
							6月2日，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大<a
								href="#">
								<查看详情>
							</a></p>
					</div>
					<div class="month-detail-box">
						<span class="month-title">7月</span>
						<p class="incident-record">
							7月2日，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大<a
								href="#">
								<查看详情>
							</a></p>
					</div>
					<div class="month-detail-box">
						<span class="month-title">8月</span>
						<p class="incident-record">
							8月2日，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大<a
								href="#">
								<查看详情>
							</a></p>
					</div>
					<div class="month-detail-box">
						<span class="month-title">9月</span>
						<p class="incident-record">
							9月2日，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大<a
								href="#">
								<查看详情>
							</a></p>
					</div>
				</div>
				<div class="shaft-detail-cont">
					<p class="timer-year"><i class="icon-year"></i><span>2016年</span></p>
					<div class="month-detail-box">
						<span class="month-title">1月</span>
						<p class="incident-record">
							1月21日、22日，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大。
						</p>
					</div>
					<div class="month-detail-box">
						<span class="month-title">2月</span>
						<p class="incident-record">
							2月1日，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大<a
								href="#">
								<查看详情>
							</a></p>
					</div>
					<div class="month-detail-box">
						<span class="month-title">3月</span>
						<p class="incident-record">
							3月8日，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大
						</p>
						<p class="incident-record">
							3月10日，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大<a
								href="#">
								<查看详情>
							</a></p>
					</div>
				</div>
				<div class="shaft-detail-cont">
					<p class="timer-year"><i class="icon-year"></i><span>2017年</span></p>
					<div class="month-detail-box">
						<span class="month-title">1月</span>
						<p class="incident-record">
							1月21日、22日，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大
						</p>
					</div>
					<div class="month-detail-box">
						<span class="month-title">2月</span>
						<p class="incident-record">
							2月1日，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大<a
								href="#">
								<查看详情>
							</a></p>
					</div>
				</div>
				<div class="shaft-detail-cont">
					<p class="timer-year"><i class="icon-year"></i><span>2018年</span></p>
					<div class="month-detail-box">
						<span class="month-title">1月</span>
						<p class="incident-record">
							1月21日、22日，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大
						</p>
					</div>
				</div>
				<div class="shaft-detail-cont">
					<p class="timer-year"><i class="icon-year"></i><span>2019年</span></p>
					<div class="month-detail-box">
						<span class="month-title">1月</span>
						<p class="incident-record">
							1月21日、22日，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大
						</p>
					</div>
					<div class="month-detail-box">
						<span class="month-title">2月</span>
						<p class="incident-record">
							2月1日，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大<a
								href="#">
								<查看详情>
							</a></p>
					</div>
				</div>
				<div class="shaft-detail-cont">
					<p class="timer-year"><i class="icon-year"></i><span>2020年</span></p>
					<div class="month-detail-box">
						<span class="month-title">1月</span>
						<p class="incident-record">
							1月21日、22日，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大
						</p>
					</div>
				</div>
				<div class="shaft-detail-cont">
					<p class="timer-year"><i class="icon-year"></i><span>2021年</span></p>
					<div class="month-detail-box">
						<span class="month-title">1月</span>
						<p class="incident-record">
							1月21日、22日，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大
						</p>
					</div>
					<div class="month-detail-box">
						<span class="month-title">2月</span>
						<p class="incident-record">
							2月1日，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大<a
								href="#">
								<查看详情>
							</a></p>
					</div>
				</div>
				<div class="shaft-detail-cont">
					<p class="timer-year"><i class="icon-year"></i><span>2022年</span></p>
					<div class="month-detail-box">
						<span class="month-title">1月</span>
						<p class="incident-record">
							1月21日、22日，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大
						</p>
					</div>
				</div>
				<div class="shaft-detail-cont">
					<p class="timer-year"><i class="icon-year"></i><span>2023年</span></p>
					<div class="month-detail-box">
						<span class="month-title">1月</span>
						<p class="incident-record">
							1月21日、22日，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大
						</p>
					</div>
					<div class="month-detail-box">
						<span class="month-title">2月</span>
						<p class="incident-record">
							2月1日，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大，拄杖盲学轻声码，谁人不识黄大大<a
								href="#">
								<查看详情>
							</a></p>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/sjz.js"></script>

	<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
		<p>更多请关注：CSDN博主-《拄杖盲学轻声码》.</p>
		<p>来源：<a href="http://www.baofumeng.cn/inithdd/#/rewordData" target="_blank">古今英雄榜</a></p>
	</div>
</body>

2.2 CSS ソースコード

/*公共样式*/
html,
body {
    
    
    width: 100%;
    height: 100%;
    font-family: "microsoft yahei";
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #f3f3f3;
}

*,
body,
html,
dl,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p,
form,
header,
section,
article,
footer,
td,
th {
    
    
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    
    
    font-size: 100%
}

a {
    
    
    text-decoration: none;
    outline: none;
}

a:hover {
    
    
    text-decoration: none;
    text-underline: none;
}

img {
    
    
    border: 0
}

ul,
li {
    
    
    list-style: none;
}

i {
    
    
    font-style: normal;
}

table {
    
    
    border-collapse: collapse;
    border-spacing: 0
}

button {
    
    
    cursor: pointer;
}

input,
select,
button,
a,
textarea {
    
    
    border: 0;
    outline: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

input:-moz-placeholder {
    
    
    color: #c9c9c9;
}

input:-ms-input-placeholder {
    
    
    color: #c9c9c9;
}

input::-webkit-input-placeholder {
    
    
    color: #c9c9c9;
}

/*公共样式结束*/

.body-box {
    
    
    width: 1200px;
    margin: 100px auto;
    background: #fff;
}

.timer-shaft-box {
    
    
    width: 100%;
    padding: 30px 40px;
    box-sizing: border-box;
}

.timer-shaft {
    
    
    position: relative;
    width: 100%;
    height: 80px;
    overflow: hidden;
}

.timer-left {
    
    
    position: absolute;
    top: 50%;
    left: 20px;
    z-index: 99;
    width: 23px;
    height: 37px;
    margin-top: -18.5px;
    background: url(../images/icon_left.png) no-repeat;
    background-size: cover;
    cursor: pointer;
}

.timer-right {
    
    
    position: absolute;
    top: 50%;
    right: 20px;
    z-index: 99;
    width: 23px;
    height: 37px;
    margin-top: -18.5px;
    background: url(../images/icon_right.png) no-repeat;
    background-size: cover;
    cursor: pointer;
}

.timer-scale {
    
    
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    padding-left: 80px;
    font-size: 0;
    white-space: nowrap;
    // width: 100%;
    // background-color: #aaa;
}

.timer-scale-cont {
    
    
    display: inline-block;
    height: 100%;
    line-height: 80px;
}

.time-circle {
    
    
    display: inline-block;
    vertical-align: middle;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 18px;
    color: #fff;
    border-radius: 50%;
    background: #e2302e;
    transition: all .3s;
    cursor: pointer;
}

.timer-scale-cont.hov .time-circle {
    
    
    width: 80px;
    height: 80px;
    line-height: 80px;
    font-size: 24px;
    background: #ff8d3d;
}

.line-scale {
    
    
    display: inline-block;
    vertical-align: middle;
    width: 150px;
    height: 22px;
    margin: 0 2px;
    background: url(../images/icon_scale.png) no-repeat;
    background-size: cover;
}

.timer-shaft-content {
    
    
    width: 100%;
    // height: 300px;// background-color: #1d69a3;
    margin-top: 45px;
    overflow: hidden;
    font-size: 0;
    box-sizing: border-box;
    white-space: nowrap;
}

.shaft-detail-cont {
    
    
    display: none;
    width: 100%;
    height: 400px;
    overflow: auto;
}

.timer-year {
    
    
    padding-left: 20px;
    font-weight: bold;
    color: #333;
    font-size: 0;
}

.icon-year {
    
    
    display: inline-block;
    vertical-align: middle;
    width: 33px;
    height: 40px;
    background: url(../images/icon_sign.png) no-repeat;
    background-size: cover;
}

.timer-year span {
    
    
    display: inline-block;
    vertical-align: middle;
    margin-left: 18px;
    font-size: 24px;
}

.month-detail-box {
    
    
    position: relative;
    width: 100%;
    min-height: 93px;
    padding-top: 30px;
    font-size: 0;
    box-sizing: border-box;
    white-space: normal;
}

.month-detail-box:before {
    
    
    content: '';
    position: absolute;
    top: 0;
    left: 36.5px;
    height: 100%;
    border-right: 1px dashed #ff8d3d;
}

.month-detail-box .month-title {
    
    
    position: absolute;
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.month-detail-box .month-title:before {
    
    
    content: '';
    position: absolute;
    top: 50%;
    left: 30px;
    width: 13px;
    height: 13px;
    margin-top: -6.5px;
    background: url(../images/icon_circle.png) no-repeat;
    background-size: cover;
}

.incident-record {
    
    
    display: inline-block;
    padding-left: 71px;
    line-height: 2;
    font-size: 14px;
    color: #333;
}

.incident-record a {
    
    
    font-size: 14px;
    color: #1d69a3;
}

2.3.jsソースコード

$(function(){
    
    
	// 更多请关注CSDN-拄杖盲学轻声码
	// 时间轴
	var timerNum = 0;
	var space = 210; // 移动间距
	var length = $('.timer-scale-cont').length, numL;
	// 分辨率
	if(window.screen.width > 1500) {
    
    
		numL = length - 4
	} else if(window.screen.width < 1500) {
    
    
		numL = length - 3
	}
	// 点击左侧
	$('.timer-left').on('click', function () {
    
    
		if(timerNum > 0) {
    
    
			timerNum -= 1;
			moveL(timerNum, numL)
		}
		tags(timerNum);
	})
	// 点击右侧
	$('.timer-right').on('click', function () {
    
    
		if(timerNum < length - 1) {
    
    
			timerNum += 1;
			tags(timerNum);
		}
		moveL(timerNum, numL)
	})
	// 点击年
	$('.time-circle').each(function (index) {
    
    
		$(this).on('click', function () {
    
    
			timerNum = index;
			moveL(timerNum, numL)
			tags(timerNum);
		})
	})
	function tags(num){
    
    
		$('.timer-scale-cont').eq(num).addClass('hov').siblings().removeClass('hov');
		$('.shaft-detail-cont').eq(num).show().siblings().hide();
	}
	function moveL(num, len) {
    
    
		if (num < len) {
    
    
			moveLeft = -num * space;
			$('.timer-scale').animate({
    
    left:moveLeft}, 700);
		}
	}
})

3. ソースパッケージのダウンロードを完了する

3.1 百度ネットディスク

リンク: https://pan.baidu.com/s/1Wat_HtjrPr04qVC1r1iXBg
抽出コード: hdd6

3.2 123 クラウド ディスク

リンク: https://www.123pan.com/s/ZxkUVv-umI4.html
抽出コード: hdd6

3.3 電子メールメッセージ

コメント欄にメール アカウントを残していただければ、ブロガーがそれを見つけ次第、あなたに送信します。あなたの幸せな人生を祈っています!

要約する

今日は以上が話したいことです. この記事では主に主要なイベントのタイムラインを実現するための jquerys ベースのページ効果アプリケーションを紹介します. 私も皆さんの進歩を楽しみにしています. 2023 年も一緒に頑張りましょう! ！！

版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。

おすすめ

転載: blog.csdn.net/hdp134793/article/details/132045344
おすすめ
ランキング
欲張りアルゴリズムLeetcode45ジャンプゲームの証明プロセス
Résumé des outils couramment utilisés pour l'acoustique et l'informatique musicale (soundfile, librosa, pydub, madmom, spleeter)
OpenCVの。コンセプト
直接公式招待コード88886981の下ダイハツ
ミリ秒の形式に現在時刻を取得するJava
umijs/plugin-qiankun (vue+umi) に基づくマイクロフロントエンド構成
クローン化されたカードからLinux仮想マシンは、eth1にはeth0になり
10G SFP + 10G XFP光モジュール及び光モジュール
DevExpressがDateEditを設定して年、月、四半期を表示
Mavenがローカルに外部jarパッケージをインポートする
アーカイブ
もっと
2024-05-19(0)
2024-05-18(30)
2024-05-17(6)
2024-05-16(24)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)

コードワールド

© 2018 codetd.com