适合在企业网站展示企业发展历程的时间轴滑动特效源码

最新推荐文章于 2024-01-31 17:45:00 发布
最新推荐文章于 2024-01-31 17:45:00 发布
阅读量2k 收藏
点赞数
分类专栏： 前端源码 文章标签： javascript 经验分享
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mazai5080/article/details/124417986
版权

大家好，今天给大家介绍一款，JavaScript实现的适合在企业网站展示企业发展历程的滑动特效源码（图1）。送给大家哦，获取方式在本文末尾。

图1

可以用鼠标左右滑动查看，也可以点击左右按钮查看（图2）

图2

源码完整，需要的朋友可以下载学习（图3）

图3

本源码编码：10141，需要的朋友，关注文末公众号，搜索10141，即可获取。

部分代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>公司发展历程特效</title>

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

</head>
<body>

<div class="about-main2" style="background-image: url(static/image/lc_bg.jpg);">
	<div class="licheng-bg">
		<img src="static/picture/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>
							<li class="item2">
								<a class="clearfix">
									<div class="lc-left">
										<span class="date" style="text-align: center">2019.05.16</span>
										<i class="line"></i> </div>
									<div class="lc-right">
										<div class="right-text">
											<h3>公司更名</h3>
											<p>根据许可《关于核准某某某有限公司变更注册资本和股权的批复》，公司注册资本增加至2亿元，由上海某某某有限公司控股，公司名称变更为某某某有限公司。</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 src="static/js/jquery-1.10.2.js"></script>
<script src="static/js/swiper.min.js" type="text/javascript" ></script>
<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>
	<a href="https://smalltool.github.io/" style="display:none;"></a>
</body>
</html>

本源码编码：10141，需要的朋友，关注文末公众号，搜索10141，即可获取。

mazai5080
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
公司发展历程企业项目进度大事记时间轴PPT模板
haha416的博客
07-08 899
现在在公司企业历程 项目进度 个人成长简介 时间推演方面，时间轴PPT运用的是越来越广泛了，相信大家对于怎么设计运用时间轴是充满兴趣的，下面先给大家展示几张精美动态时间轴PPT缩略图。 在时间轴设计方面有突破单调的点和线，以线为时间方向，点带出时间和时间，把线“折弯”，或者直接用色块，直接抛弃线和点的结构，全部用色块，也可时间部分用色块，还可以借用图片，用图片中有关联的因素来做时间轴，如山峰、长城；用图片中前后可以衔接的因素做时间轴都可。 时间轴PPT关键在于思维上的突...
JS发展历史
qq_41552204的博客
10-17 373
js发展历史简单理解语言介绍适用场景发展历史 简单理解 JavaScript经常简写为JS，最开始是网景公司的布兰登·艾奇开发，后来又ECMA发布ECMAScript，简称ES，ECMAScript 是标准而Javascript是实现，2015年发布ES6，并且从2015年开始每年都发布新的ECMAScript版本，现在2020年是ES11。 语言介绍 JavaScript 官方名称是 ECMAScript 是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户
CSS3实现的公司发展历程时间轴
11-24
CSS3实现的公司发展历程时间轴
企业历程通道展示模型
07-15
企业历程通道展示模型适用于展示模型设计
JS特效第120弹：公司网站发展时间轴特效
最新发布
weixin_38343072的博客
01-31 292
经典的JS特效动画效果，效果实现的全部代码已提供，可供学习借鉴
公司发展事件时间轴jsjs特效
ICode联盟
10-18 322
公司发展事件时间轴js特效，采用粒子动态背景网页特效。
html时间轴横向自动播放,利用jQuery实现日期时间轴自动播放代码
weixin_30253771的博客
05-31 961
特效描述：利用jQuery实现 日期时间轴 自动播放代码。利用jQuery实现日期时间轴自动播放代码代码结构1. 引入CSS2. 引入JS3. HTML代码渲染未完成延迟动画渲染完成继续动画var timeplay = new TimePlay({speed: 2000,//播放速度startDate: 20180701,//开始日期endDate: 20190131,//结束日期timeUnit...
简单css3时间轴样式代码
ICode联盟
04-23 283
下载地址 使用css3实现的垂直时间轴样式代码，时间轴采用线条的的样式，简单通用。可以用作公司发展史等等。 dd:
vue 发展历程时间轴动画_腾讯公司动态时间轴PPT设计走红！高级有创意！网友：太炫了...
weixin_39751769的博客
12-17 269
先问各位一个问题，你做过时间轴PPT页面吗？相信很多人的回答是：做过！毕竟时间轴页面是PPT中常见的页面！职场人应该经常会遇到，比如我们需要制作公司的大事记PPT页面，或者公司某个项目的进展过程等等，这样的页面很多见！可能你见的大部分的PPT时间轴页面是这样的：感觉也不错，缺少了点什么？但各位看下这个时间轴的设计：这是我的旁友圈——旁门左道PPT学习社群中的一期作业，其中一位学员制作的，是不是超级...
HTML最新垂直简约的网站时光轴源码分享
ewrgrh的博客
07-21 604
HTML+CSS+JS制作的垂直时光轴源码，适合网站更新记录，直接html内嵌框架进去就可以了。
jQuery公司发展历程时间轴代码.zip
07-04
jQuery公司发展历程时间轴代码是一款大事记时间轴代码。 jQuery公司发展历程时间轴代码 截图
CSS3实现的个人或者公司发展历程时间轴
09-12
网页时间轴一般用于展示以时间为主线的事件，如个人成长经历或者企业网站常见的公司发展历程等。给大家介绍一款基于HTML5和CSS3的漂亮的垂直时间轴，它可以响应页面布局，适用于HTML5开发的PC和移动手机WEB应用。
发展历程
02-26
DevOps课程 工作时间 链接 [A] [B] [C] [D] [E] [F] [G] 练习题 [1] [2] Google Cloud Essentials： [3] [4]- [5]- [6] [7] [8] [9] [10] [11] [12] [13] [14] [15] 在家工作 第一天 Reshma的MongoDB任务-> Luminus 读： | 第二天 准备第3天：使用您的Google Cloud Credits设置一个小型虚拟机 地点：新加坡 键入g1-small（1个vCPU，1.7 GB内存） 引导盘：Ubuntu 18.04 LTS 防火墙：允许HTTP通信 读： 第三天 项目–选择以下选项之一 （1） >您的交付物是滑板 （2） >您的交付品是带有代码和描述的GitHub存储库 每个学生一个项目，无小组作业 在会
jQuery时间轴公司发展历程特效.zip
07-05
jQuery时间轴公司发展历程特效是一款基于swiper.js制作企业发展历程水平时间轴，带波浪背景的水平时间轴滚动特效。
jQuery发展历程横向时间轴代码.zip
07-05
jQuery发展历程横向时间轴代码，支持鼠标左右拖动，鼠标点击左右箭头切换，键盘左右方向键控制内容左右移动。
jQuery企业发展大事件时间轴特效代码
03-20
jQuery企业发展大事件时间轴代码是一款企业发展大事件时间轴，水平的年份导航时间轴，左右滚动切换代码。
jQuery时间轴公司发展历程特效特效代码
03-20
jQuery时间轴公司发展历程特效是一款基于swiper.js制作企业发展历程水平时间轴，带波浪背景的水平时间轴滚动特效。
公司企业软件版本大事件时间轴记录带动画特效可折叠展开js效果.zip
07-11
公司企业软件版本大事件时间轴记录带动画特效...一款jQuery animate动画效果制作滑动收缩展开时间轴企业发展记录历程，通过设置每个年份为标题控制，记录列表滑动收缩展开。默认下自动滑动展开时间轴大事记历程js插件。
记录网站发展历程时光轴源码 v1.0
12-02
记录网站发展历程时光轴源码是一个以html5+js进行开发的时光轴网站模板。
vue实现公司发展历程水平时间轴特效，实现一个demo
06-07
好的，以下是一个简单的Vue实现公司发展历程水平时间轴的demo。 首先，我们需要准备一些数据。在本例中，我们将使用以下数据： ```javascript [ { year: 1998, event: '公司成立', description: '公司在1998年成立，开始从事软件开发业务。' }, { year: 2005, event: '公司扩张', description: '公司在2005年扩张业务，成为一家规模较大的软件公司。' }, { year: 2010, event: '公司上市', description: '公司在2010年成功上市，成为一家受到投资者青睐的公司。' }, { year: 2018, event: '公司进军人工智能领域', description: '公司在2018年开始进军人工智能领域，开发了一系列AI产品。' } ] ``` 接下来，我们需要编写Vue组件来展示这些数据。我们将使用v-for指令来循环遍历数据，并使用v-bind指令将数据绑定到模板中。以下是组件的代码： ```html <template> <div class="timeline"> <div class="timeline__item" v-for="(item, index) in items" :key="index"> <div class="timeline__item__date">{{ item.year }}</div> <div class="timeline__item__event">{{ item.event }}</div> <div class="timeline__item__description">{{ item.description }}</div> </div> </div> </template> <script> export default { data() { return { items: [ { year: 1998, event: '公司成立', description: '公司在1998年成立，开始从事软件开发业务。' }, { year: 2005, event: '公司扩张', description: '公司在2005年扩张业务，成为一家规模较大的软件公司。' }, { year: 2010, event: '公司上市', description: '公司在2010年成功上市，成为一家受到投资者青睐的公司。' }, { year: 2018, event: '公司进军人工智能领域', description: '公司在2018年开始进军人工智能领域，开发了一系列AI产品。' } ] } } } </script> <style> .timeline { display: flex; flex-direction: row; overflow: hidden; } .timeline__item { flex: 1; padding: 20px; position: relative; } .timeline__item__date { font-size: 24px; font-weight: bold; margin-bottom: 10px; } .timeline__item__event { font-size: 18px; font-weight: bold; margin-bottom: 10px; } .timeline__item__description { font-size: 16px; } </style> ``` 最后，我们需要编写一些CSS样式来确保时间轴的正确显示。以下是CSS样式的代码： ```css .timeline { display: flex; flex-direction: row; overflow: hidden; } .timeline__item { flex: 1; padding: 20px; position: relative; } .timeline__item__date { font-size: 24px; font-weight: bold; margin-bottom: 10px; } .timeline__item__event { font-size: 18px; font-weight: bold; margin-bottom: 10px; } .timeline__item__description { font-size: 16px; } .timeline__item:before { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background-color: #ccc; z-index: -1; } .timeline__item:first-child:before { display: none; } .timeline__item:nth-child(even) .timeline__item__date { text-align: right; } .timeline__item:nth-child(even):before { right: 0; left: auto; } ``` 现在，我们已经完成了一个基本的Vue时间轴组件。您可以在Vue的实例中使用该组件，如下所示： ```html <template> <div> <h1>公司发展历程</h1> <Timeline /> </div> </template> <script> import Timeline from './Timeline.vue' export default { components: { Timeline } } </script> ``` 希望这个简单的demo对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值