前端[新手引导动画]效果: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,一经查实,立即删除!

相关文章

扎哇面试准备

1.你是谁? 我是李四,24 届学生,目前就读于西安电子科技大学,硕士学历,就读的专业是软件工程(非软件相关专业就不要介绍你的专业了),很荣幸参加贵公司的面试 2.你会啥? …

06.Elasticsearch应用(六)

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

MySQL的`FOR UPDATE`详解

MySQL的FOR UPDATE详解 欢迎阅读本博客,今天我们将深入探讨MySQL中的FOR UPDATE语句,它用于在事务中锁定选择的数据行,确保在事务结束前其他事务无法修改这些数据。 1. FOR UPDATE基础 FOR UPDATE是用于SELECT语句的一种选项,它…

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

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

C++提高编程——STL:常用算法

本专栏记录C学习过程包括C基础以及数据结构和算法,其中第一部分计划时间一个月,主要跟着黑马视频教程,学习路线如下,不定时更新,欢迎关注。 当前章节处于: ---------第1阶段-C基础入门 ---------第2阶段实战…

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

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

Springboot 使用Redis中ZSetOperations实现博客访问量功能

Springboot 使用Redis中ZSetOperations实现博客访问量功能 1.在application.yml中Redis配置信息 spring:redis:host: 127.0.0.1port: 6379password: 123456782.在pom.xml中加载依赖 <dependency><groupId>org.springframework.boot</groupId><artifact…

06-枚举和模式匹配

上一篇&#xff1a;05-使用结构体构建相关数据 在本章中&#xff0c;我们将介绍枚举。枚举允许你通过枚举其可能的变体来定义一种类型。首先&#xff0c;我们将定义并使用一个枚举&#xff0c;以展示枚举如何与数据一起编码意义。接下来&#xff0c;我们将探索一个特别有用的枚…

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

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

探索HTMLx:强大的HTML工具

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

什么叫概率分布?

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

rust for循环里的所有权 - into_iter / iter / iter_mut

文章目录 1 遍历对象实质为 .into_iter() 生成的迭代器2 避免转移 .iter() / .iter_mut()3 for循环里自变量为什么不用加mut // for循环语法糖 for loop_variable in iterator {code() } // 解糖 {let result match IntoIterator::into_iter(iterator) {mut iter > loop {m…

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

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

【蓝桥备赛】四元组问题——单调栈

题目链接 四元组问题 个人思路 这个题目…真费脑子 假设 a,b,c,d 对应的值分别是 A,B,C,D 总的来说&#xff0c;就是从前往后一个单调栈从大到小找 A&#xff1b;从后往前&#xff0c;一个单调栈从大到小找 D。 具体看注释更清晰点&#xff01; 参考代码 Java import jav…

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

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

Scapy编程指南(基础概念)

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

开始学习Vue2(axios和Vuex)

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

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

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

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

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

Mybatis 拦截器注册方式

在MyBatis中注册拦截器可以通过以下三种方式&#xff1a; 1. XML配置文件方式 在Mybatis的核心配置文件&#xff08;mybatis-config.xml&#xff09;中的标签下定义拦截器&#xff0c;并指定实现类。 <configuration><!-- ...其他配置... --><plugins><…