[Jquery big event timeline] jquery realizes the scrolling switching effect of the big event timeline (time axis) "with complete source code"

---

---

written in front

In fact, this kind of web page for major event records is also common, especially for business data with a time dimension. Of course, today I am not mainly in the business of the company, because I personally saw a good example, so I share it with you , I was lazy last week and didn't update the article, so let's make it up slowly.

Knowledge points involved

Jquery realizes the timeline effect of big events, how to realize the good-looking and clear timeline effect on the front end, how to realize the timeline page effect, realize the timeline effect of big events based on jquery, and horizontally scroll the timeline code of big event development for enterprises in jQuery.
版权声明：此文原创于CSDN博主-《拄杖盲学轻声码》，主页有很多分享的代码，期待您的访问。

page effect

In fact, this is to allow more people to choose whether to continue reading this article, and to accurately locate the demo you want for everyone. There is a download link for the complete code package at the end of the article.

1. Build a framework

Of course, the core of building a framework is to know its components, just like how to divide it into several modules, so I use my module positioning method to achieve this effect.

1.1 Module construction

First of all, the modules are divided, and two small containers are written in one container, and then the year time axis and the specific month time line of the year are placed respectively. The frame looks like this:

1.2 Content filling

The first module wanted to write the timeline of this year from 15 years to 23 years, so I used a background image for the effect of the event line, and connected multiple circles with the background image to form the effect of a timeline ,as follows:

The core of the second module is to draw a vertical event timeline. I added a small bubble effect on the top, and then I used the border attribute for the timeline of a specific month. Set the before attribute to border- right:
1px dashed #ff8d3d; In order to achieve the effect of the line, for the small circle, I use the icon small picture, in fact, it also sets the background attribute. The settings are as follows:

1.3 Timeline switching

This function is mainly controlled by writing related logic through js. By clicking left and right to switch the status of different balloons and the synchronous change of the content below, the main implementation is an animation function and a switching function. The core point is the display of dom elements and hide. The core js code is as follows:

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. Complete code

Remember that this demo is based on jquery, so jquery components must be introduced

2.1 HTML source code

<!-- 更多内容可关注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 source code

/*公共样式*/
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 source code

$(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. Complete source package download

3.1 Baidu Netdisk

Link: https://pan.baidu.com/s/1Wat_HtjrPr04qVC1r1iXBg
Extraction code: hdd6

3.2 123 cloud disk

Link: https://www.123pan.com/s/ZxkUVv-umI4.html
Extraction code: hdd6

3.3 Email message

Leave your email account in the comment area, and the blogger will send it to you as soon as he sees it. I wish you a happy life!

---

Summarize

The above is what I want to talk about today. This article mainly introduces the page effect application based on jquerys to realize the timeline of major events. I also look forward to everyone's progress together. Let's work together in 2023! ! !

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