jQuery大事件时间轴特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

24 93 32



特效描述:大事件时间轴。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>



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


热门标签: 滚动导航菜单 导航切换 时间轴 滚动切换 日历选择器 图片滚动 图片切换 时间日期插件 文字滚动 文字切换 背景切换 图片文字滚动 手风琴 全屏滚动 选项卡自动切换 页面滚动 视频切换 列表切换 渐隐切换 全屏切换 切换按钮 缩放切换 滚动流动 滚动切换 滑动选项卡切换 自动滚动图片轮播 选项卡切换 滑动手风琴 日历日期时间

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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