前端[新手引导动画]效果:intro.js

目录

一、安装

二、配置

三、编写需要引导动画的页面

四、添加引导效果


一、安装

npm i intro.js

二、配置

详细配置可以参考,官网:

Intro.js Documentation | Intro.js Docs

https://introjs.com/docs

新建一个intro.js的文件:

三、编写需要引导动画的页面

四、添加引导效果

把第二部写的intro.js全局引入或者引入到需要动画引导的vue页面,然后配置步骤steps,steps每个都是跟DOM选择器有关系,配置好先后顺序即可。并执行start方法,开始执行引导效果。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/646799.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

06.Elasticsearch应用(六)

Elasticsearch应用(六) 1.什么是分词器 ES文档的数据拆分成一个个有完整含义的关键词,并将关键词与文档对应,这样就可以通过关键词查询文档。要想正确的分词,需要选择合适的分词器 2.ES中的默认分词器 fingerprint…

15- OpenCV:模板匹配(cv::matchTemplate)

目录 1、模板匹配介绍 2、cv::matchTemplate 3、模板匹配的方法(算法) 4、代码演示 1、模板匹配介绍 模板匹配就是在整个图像区域发现与给定子图像匹配的小块区域。 它可以在一幅图像中寻找与给定模板最相似的部分。 模板匹配的步骤: &a…

Unity中URP下计算额外灯的方向

文章目录 前言一、为什么额外灯的方向,不像主平行灯一样直接获取?1、主平行灯2、额外灯中,包含 点光源、聚光灯 和 平行灯 二、获得模型顶点指向额外灯的单位向量三、Unity中的实现 前言 在上一篇文章中,我们获取了URP下额外灯的…

eNSP学习——交换机配置Trunk接口

目录 原理概述 实验内容 实验目的 实验步骤 实验拓扑 实验编址: 试验步骤 基本配置 创建VLAN,配置Access接口 配置Trunk接口 思考题 原理概述 在以太网中,通过划分VLAN来隔离广播域和增强网络通信的安全性。以太网通常由多台交换机组…

探索HTMLx:强大的HTML工具

1. HTMLX htmx 是一个轻量级的 JavaScript 库,它允许你直接在 HTML 中使用现代浏览器的功能,而不需要编写 JavaScript 代码。通过 htmx,你可以使用 HTML 属性执行 AJAX 请求,使用 CSS 过渡动画,利用 WebSocket 和服务…

什么叫概率分布?

概率分布是描述随机变量可能取值及其相应概率的数学函数或规律。它提供了随机变量在各个取值上的概率信息,用于表示随机现象的不确定性和随机性。 概率分布可以分为两类:离散概率分布和连续概率分布。 1. 离散概率分布: 适用于描述离散随机…

vue3和vite项目在scss中因为本地图片,不用加~

看了很多文章说要加~,真的好坑哦,我的加了~反而出不来了: 304 Not Modified 所以需要去掉~: /* 默认dark主题 */ :root[themered] {--bg-color: #0d1117;--text-color: #f0f6fc;--backImg: url(/assets/images/redBg.png); }/* …

磺化-Cy5-左旋聚乳酸,Sulfo-Cyanine5-PLLA,一种生物相容性良好的生物降解材料

您好,欢迎来到新研之家 文章关键词:磺化-Cy5-左旋聚乳酸,Sulfo-Cyanine5-PLLA,Sulfo-Cyanine5-Poly(L-lactic acid) 一、基本信息 产品简介:Sulfo Cy5 PLLA, also known as sulfonated Cyanine5 L-polylactic acid,…

Scapy编程指南(基础概念)

Scapy编程指南(基础概念) Scapy是什么 Scapy是Python中一个非常强大的库,它专门用于处理、发送和捕获网络协议中的数据包,它允许开发人员通过Python代码构建、解析和发送自定义网络协议的数据包。Scapy提供了一种直观、灵活的方…

开始学习Vue2(axios和Vuex)

一、Axios 1、Axios 简介 Axios 是一个基于 promise 网络请求库 ,作用于node.j s 和浏 览器中。它是 isomorphic 的(即同一套代码可以运行在浏览器 和 node.js 中)。在服务端它使用原生 node.js http 模块, 而在 客户端 (浏览端) 则使用 XMLHttpRequests。 …

基于python豆瓣电影评论的情感分析和聚类分析,聚类分析有手肘法进行检验,情感分析用snownlp

基于Python的豆瓣电影评论的情感分析和聚类分析是一种用于探索电影评论数据的方法。 情感分析 情感分析旨在从文本中提取情感信息,并对其进行分类,如正面、负面或中性。在这里,我们使用了一个名为snownlp的Python库来进行情感分析。Snownlp是…

Redis入门到实战-基础篇+实战篇+高级篇+原理篇

Redis入门到实战-基础篇实战篇高级篇原理篇 文章目录 Redis入门到实战-基础篇实战篇高级篇原理篇一、基础篇二、实战篇三、高级篇四、原理篇 一、基础篇 1.基础篇笔记:https://blog.csdn.net/cygqtt/article/details/126974142 二、实战篇 1.实战篇笔记:…

Java项目:基于SSM框架实现同城蔬菜配送管理系统(SSM+B/S架构+源码+数据库+毕业论文)

一、项目简介 本项目是一套ssm825基于SSM框架实现同城蔬菜配送管理系统,主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Java学习者。 包含:项目源码、数据库脚本等,该项目附带全部源码可作为毕设使用。 项目都经过严格调试&…

web前端javascript笔记——(14)Navigator 、History、Location

Navigator <!DOCTYPE html><head><meta charset"UTF-8"><title></title><style></style><script type"text/javascript">/*DOM文档对象&#xff0c;通过js操作网页BOM 浏览器对象BOM可以使我们通过JS来操…

HarmonyOS4.0系统性深入开发26方舟开发框架(ArkUI)概述

方舟开发框架&#xff08;ArkUI&#xff09;概述 方舟开发框架&#xff08;简称ArkUI&#xff09;为HarmonyOS应用的UI开发提供了完整的基础设施&#xff0c;包括简洁的UI语法、丰富的UI功能&#xff08;组件、布局、动画以及交互事件&#xff09;&#xff0c;以及实时界面预览…

林浩然的数学奇遇记:从计算机视觉到深海中的数学宝藏

林浩然的数学奇遇记&#xff1a;从计算机视觉到深海中的数学宝藏 Lin Haoran’s Mathematical Odyssey: From Computer Vision to Mathematical Treasures in the Deep Sea 在那个充满像素与算法的世界里&#xff0c;有一位名叫林浩然的主角&#xff0c;他并非怀揣着成为华罗庚…

【视野提升】ChatGPT的系统是如何工作的?

类似ChatGPT的系统是如何工作的&#xff1f; 我们试图在下图中解释它是如何工作的。这个过程可以分为两个部分。 训练 要训练一个ChatGPT模型&#xff0c;有两个阶段&#xff1a; 预训练 在这个阶段&#xff0c;我们在大量互联网数据上训练一个GPT模型&#xff08;仅解码器转…

【mongoDB】数据库的创建和删除

目录 1. 查看所有数据库 2.创建数据库 3.查看当前连接的数据库 4.删除数据库 1. 查看所有数据库 show dbs 2.创建数据库 use 数据库名 例如创建一个名为 aaa 的数据库 3.查看当前连接的数据库 db 4.删除数据库 use 数据库名 db.dropDataBase() 比如删除数据库 aaa

《WebKit技术内幕》学习之十三(3):移动WebKit

3 其他机制 3.1 新渲染机制 为了移动领域更好的用户体验&#xff0c;渲染机制所做的改进主要是提升渲染性能来增加响应的速度&#xff0c;甚至不惜牺牲一些跟规范定义的行为不一致的地方。在这一小节中主要介绍三个方面的技术&#xff0c;其一是Tiled Backing Store&#x…

vue3 组件通信 mitt

mitt 安装 pnpm add mitttypescript 在 tsconfig.json 中设置 “strict”: true {"compilerOptions": {"strict": true,} }使用 导出 emitter src/utils/mitt/index.ts import mitt from mitttype Events {get-name: string }export const emitter …