利用jQuery实现企业发展大事件时间轴代码



14 55 19



特效描述:利用jQuery实现 企业发展 大事件 时间轴代码,利用jQuery实现企业发展大事件时间轴代码

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/main.css">

2. 引入JS

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

3. HTML代码

<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">2018</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">2016</p>
					<p class="line-scale"></p>
				</div>
				<div class="timer-scale-cont">
					<p class="time-circle">2015</p>
					<p class="line-scale"></p>
				</div>
				<div class="timer-scale-cont">
					<p class="time-circle">2014</p>
					<p class="line-scale"></p>
				</div>
				<div class="timer-scale-cont">
					<p class="time-circle">2013</p>
					<p class="line-scale"></p>
				</div>
				<div class="timer-scale-cont">
					<p class="time-circle">2012</p>
					<p class="line-scale"></p>
				</div>
				<div class="timer-scale-cont">
					<p class="time-circle">2011</p>
					<p class="line-scale"></p>
				</div>
				<div class="timer-scale-cont">
					<p class="time-circle">2010</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>2018年</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 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>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 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>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>
			<div class="shaft-detail-cont">
				<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日,大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件</p>
				</div>
			</div>
			<div class="shaft-detail-cont">
				<p class="timer-year"><i class="icon-year"></i><span>2014年</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>2013年</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>2012年</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>2011年</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>2010年</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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 日期时间 时钟 日历 时间 日历插件 时间日期插件 时间轴 竖直时间轴 横向时间轴 文字切换 文字选项卡

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到