（记录）使用vue实现发展历程模块

已于 2022-07-01 15:25:54 修改
阅读量320 收藏
点赞数 1
文章标签： vue.js
于 2022-04-11 09:00:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48372590/article/details/124061535
版权
工作记录
摘要由CSDN通过智能技术生成

我想要的效果是：点击年份，对应的年份会切换样式，并且图片会跟着在对应的位置下面不停缩放-用动画，点击年份还会跳到相关的内容-用锚点

1、由于我的是原生项目，需要引入在线的vue

2、构建vue的实例，定义要渲染的年份数组，定义图片的索引值，一开始是0，第一个元素

最低0.47元/天 解锁文章
Cynthia-dong
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 发展历程时间轴动画_腾讯公司时间轴PPT设计走红！高级有创意！网友：太炫了...
weixin_39832628的博客
12-11 298
在职场PPT的制作中，有句话是这么说的：时间轴的制作，最能见证一个人的设计水平！确实，看似简单时间轴有人能做成这样：也有人做成这样：当然，在很多的时间轴设计中，我个人比较喜欢的还是腾讯的发展历程时间轴：很简单，但却有种高级的感觉！整个页面的和谐度非常的高！如果我们能将这种方法用在我们的PPT设计中，一定可以让领导惊艳哦！转发文章后，点击我的头像，私信关键字【优质模板】，30多套优质PPT模板直接分...
Vue之时间轴组件
weixin_30500473的博客
02-13 6024
github地址：https://github.com/SunshineMibai/vue-timeline 实现思路及步骤： 页面分为四个部分 1、左侧时间 2、中间圆点 3、右侧内容 4、虚线部分 最外层div,relative布局,方便子元素计算尺寸 左侧时间固定宽度，显示时间（本demo:100px）,之后absolute绝对定位（left:0） 中间圆点ab...
vue 实现公司发展历程 步骤条 鼠标可进行点击来改变选中状态
NYYandYF的博客
06-23 705
vue 实现公司发展历程 步骤条 鼠标可进行点击来改变选中状态
Vue.js的发展史（一）
最新发布
2301_79683791的博客
05-15 904
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
vue实现横向时间轴组件
热门推荐
Mini_小仙女的博客
04-08 1万+
前言：项目中有需要用到横向时间轴，网上大部分组件不满足 功能需要，于是自己写了一个。先上简单的demo。 功能： 默认获取初始数据显示对应的时间轴和时间点。 当超出屏幕后，滑动滚动条加载更多页，类似分页加载。 某个大的时间轴节点鼠标放入需要显示相关信息。 某两个大节点之间会有子节点出现。 每个子节点会有对应的内容展示 ...
Vue实现swiper轮播组件
qq_45752104的博客
10-18 4270
目前市面上有很多轮播组件，但是有的不满足业务需求，因此也需要自己首先轮播组件。以下是一个用vue实现的轮播组件，带动画效果，可以自行设置轮播速度，选择是否需要分页器等。效果如下： 思路： 结构：一个轮播组件应该由三部分组成，一是轮播的元素，如图片等；二是底部的分页器；三是前一张，后一张的按钮； 轮播实现：外层元素有固定的宽度，形成一个展示窗口，内层的轮播元素排列在窗口后面，定时移动内层元素，从而实现轮播。 注意点：当内层元素不断向左移动到达最后一个元素后，下一次移动需要将最后一个元素移动到第一个元素，
vue 实现横向时间轴
weixin_34320724的博客
05-28 1万+
效果： <template> <!--时间线--> <div class="timeLine" style="overflow: hidden;"> <div class="content"> <p class="tit">{{timeLineList[timeI...
基于ssm+vue大学学生成长系统.zip
03-29
【标题】"基于SSM+Vue的大学学生成长系统"是一个综合性的项目，它结合了后端的Spring、...通过这样的系统，学生可以全面记录和追踪自己的成长历程，而开发者则能深入理解SSM+Vue的集成开发以及微信小程序的开发流程。
超市收银系统的设计分析实现（终极版）.doc
09-29
对超市收银系统进行了全面概述，分析了其发展历程和特点，并简要介绍了所使用的开发工具。 【第一章 绪论】 1.1 问题的提出和研究背景 随着信息技术的飞速发展，超市管理的自动化需求日益增强，尤其是收银环节。...
网络日志：记录我个人的前端问题，以及解决方案，留待以后自己查看
03-04
5. **JavaScript库和框架**：随着技术的发展，像jQuery、React、Vue、Angular等库和框架的应用越来越广泛。作者可能记录了如何使用这些工具，以及在使用过程中遇到的问题和解决方案。 6. **错误调试**：学会使用...
响应式手机销售网站模板
11-30
10. **关于我们**：介绍公司背景、发展历程、售后服务等。 11. **新闻资讯**：发布行业动态、促销活动等。 12. **搜索功能**：快速查找特定产品。 13. **订单历史**：用户查看过去的购买记录。 14. **客户服务**：...
从源码的角度看vue的成长历程
08-10
从源码的角度看vue的成长历程
SoDA-website-legacy:该存储库包含用于构建ASU软件开发者协会官方网站的源代码
05-12
6. **版本控制**：通过Git提交历史了解项目的发展历程和变更记录。 通过分析和学习这个项目，开发者不仅可以提升JavaScript技能，还可以学习到Web开发的最佳实践，如何组织项目结构，以及如何使用版本控制工具进行...
vue3使用vis绘制甘特图制作timeline可拖动时间轴，时间轴中文化
林啾啾的博客
02-13 3382
vue3使用vis绘制甘特图制作timeline可拖动时间轴，时间轴中文化，并实现原始图、撤销功能
vue-light-timeline实现时间轴
star的博客
03-24 2941
效果如下： 使用了vue-light-timeline 首先install：npm install vue-light-timeline 在main.js中： import LightTimeline from 'vue-light-timeline'; Vue.use(LightTimeline); 在Timeline.vue中： <div> <light-t...
使用Vue快速展示历史记录
星银色飞行船的博客
08-08 2873
前言 最近使用vue做了一个历史记录界面，动态赋值的简便性令我陶醉。读完本文您将了解v-for循环，v-text赋值和{{}}赋值，v-if判断和:class=“{a：b}”动态绑定 编程工具：VisualStudio2017 目录 接口编写固定数据 Js中写请求 页面元素的动态赋值 实现效果图 1.接口编写固定数据 后端代码写在了flip.ashx一般处理程序中。数据全部写成固定的，在后台拼接好，等待前台的请求调用。 try { if (context.Request.Para
＜ 简述 “ 尤大 ” 的 Vue3 相比 Vue 2 的区别 ＞
一个平平无奇的技术宅
04-10 1698
文章目录一、发展历程及背景> vue.js发展历程> 背景二、Vue3 变化内容1、进步特征简述> 特征一：速度更快> 特征二：体积更小> 特征三：更易维护> 特征四：拥抱TypeScript> 特征五：更接近原生> 特征六：更易使用2、Vue3 中需要关注的新功能> framents> Teleport> createRenderer> composition Api3、非兼容变更> Global API> 模板指令&gt
Vue入门一（前端发展史｜Vue介绍｜Vue插值语法｜Vue指令｜style与class使用｜条件渲染）
Mchen的博客
01-05 630
Vue(读音/vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合渐进式框架可以一点一点地使用它，只用一部分，也可以整个工程都使用它MVVM 是的缩写，它是一种基于前端开发的架构模式，是一种事件驱动编程方式Model：vue对象的data属性里面的数据，这里的数据要显示到页面中View。
Vue 学习笔记1——前端发展史
qq_44788518的博客
04-12 410
1、概述 Vue(读音/vju/，类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层（HTML+CSS+JS），不仅易于上手，还便于与第三方库（如: vue-router:跳转，vue-resource:通信，vuex:管理）或既有项目整合。 官网 2、前端知识体系 想要成为真正的“互联网Java 全栈工程师”还有很长的一段路要走，其中“大前端”是绕不开的一门必修课。本阶段课程的主要目的就是带领我J
使用vue实现评论区模块
04-24
好的，我可以向你介绍使用Vue实现评论区模块。Vue是一个流行的JavaScript前端框架，适用于构建复杂且动态的界面。如果你想在评论区中使用Vue，你需要做以下几步： 1. 添加Vue到你的项目中：你可以通过CDN链接来添加...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值