利用jQuery实现时间轴公司发展历程特效



15 57 20



特效描述:利用jQuery实现 时间轴 公司发展 历程特效,利用jQuery实现时间轴公司发展历程特效

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
<link rel="stylesheet" type="text/css" href="css/font/iconfont.css" />

2. 引入JS

<script src="js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>

3. HTML代码

<div class="about-main2" style="background-image: url(images/lc_bg.png);">
	<div class="licheng-bg">
		<img src="images/lc-quxian.png" class="quxian" />
		<div class="warper pr">
			<div class="ny-title">
				<h3 class="title-en">DEVELOPMENT</h3>
				<h4 class="title-ch">发展历程</h4>
				<i></i>
			</div>
			<div class="licheng-content swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<ul class="clearfix">
							<li class="item1">
								<a class="clearfix">
									<div class="lc-left">
										<i class="line"></i> <span class="date">1995</span>
									</div>
									<div class="lc-right">
										<div class="right-text">
											<h3>公司成立</h3>
											<p>1995年12月14日,某某某有限公司成立。</p>
										</div>
									</div>
								</a>
							</li>
							<li class="item2">
								<a class="clearfix">
									<div class="lc-left">
										<span class="date">2011</span>
										<i class="line"></i> </div>
									<div class="lc-right">
										<div class="right-text">
											<h3>公司更名</h3>
											<p>根据许可《关于核准某某某有限公司变更注册资本和股权的批复》,公司注册资本增加至2亿元,由上海某某某有限公司控股,公司名称变更为某某某有限公司。</p>
										</div>
									</div>
								</a>
							</li>
							<li class="item3">
								<a class="clearfix">
									<div class="lc-left">
										<i class="line"></i> <span class="date">2013</span>
									</div>
									<div class="lc-right">
										<div class="right-text">
											<h3>获得投资咨询业务资格</h3>
											<p>根据吉林某某某,公司获得投资咨询业务资格。</p>
										</div>
									</div>
								</a>
							</li>
							<li class="item4">
								<a class="clearfix">
									<div class="lc-left">
										<span class="date">2014</span>
										<i class="line"></i> </div>
									<div class="lc-right">
										<div class="right-text">
											<h3>公司增资,迁址,获得资管资格</h3>
											<p>根据文件某某某,公司迁址上海市;注册资本增加至6亿元人民币;取得某某某管理业务资格</p>
										</div>
									</div>
								</a>
							</li>
							<li class="item5">
								<a class="clearfix">
									<div class="lc-left">
										<i class="line"></i> <span class="date">2015</span>
									</div>
									<div class="lc-right">
										<div class="right-text">
											<h3>子公司成立</h3>
											<p>2015年1月15日,成立风险管理子公司某某某有限公司;2105年10月30日,成立上海某某某有限公司。</p>
										</div>
									</div>
								</a>
							</li>
						</ul>
					</div>
					<div class="swiper-slide">
						<ul class="clearfix">
							<li class="item1">
								<a class="clearfix">
									<div class="lc-left">
										<i class="line"></i> <span class="date">2017</span>
									</div>
									<div class="lc-right">
										<div class="right-text">
											<h3>成为中国某某某交易中心会员</h3>
											<p>2017年5月,公司成为上海某某某中心首批会员</p>
										</div>
									</div>
								</a>
							</li>
						</ul>
					</div>
				</div>
				<!--按钮-->
				<div class="lc-swiper-btn">
					<a class="btn-prev fl"><i class="iconfont">&#xe624;</i></a>
					<a class="btn-next fr"><i class="iconfont">&#xe626;</i></a>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	var mySwiper = new Swiper('.swiper-container.licheng-content', {
		autoplay: false, //自动滑动
	})
	$('.btn-prev').click(function() {
		mySwiper.swipePrev();
	})
	$('.btn-next').click(function() {
		mySwiper.swipeNext();
	})
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



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


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 切换按钮 日期时间 时钟 日历 时间 日历插件 时间日期插件 表单 表单美化 表单插件 表单美化插件 时间轴 竖直时间轴 横向时间轴 文字滑动 文字滑块 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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