首页 > 代码库 > Intro.js 网站演示
Intro.js 网站演示
Intro.js
为您的网站和项目提供一步一步的、更好的介绍
使用简单
引入 js 和 css,然后在代码中加入步骤和介绍。
快速小巧
7 KB 的 JavaScript 和 3 KB CSS,就是全部。
免费开源
免费和开源(包括商业用途),MIT许可证下。
键盘加鼠标导航
鼠标或键盘 ←
, →
, ENTER
导航,ESC
键退出。
在线实例
实例演示
参数说明
设置多个格式 json格式:
- key:value
复制
可设置参数
- nextLabel: "Next →",
- prevLabel: "← Back",
- skipLabel: "Skip",
- doneLabel: "Done",
- tooltipPosition: "bottom",
- tooltipClass: "",
- highlightClass: "",
- exitOnEsc: !0,
- exitOnOverlayClick: !0,
- showStepNumbers: !0,
- keyboardNavigation: !0,
- showButtons: !0,
- showBullets: !0,
- showProgress: !1,
- scrollToElement: !0,
- overlayOpacity: 0.8,
- positionPrecedence: ["bottom", "top", "right", "left"],
- disableInteraction: !1
复制
设置方法(多个参数设置)
关键字:setOptions
- introJs().setOptions({‘prevLabel‘:‘← 上一步‘,‘nextLabel‘:‘下一步 →‘,‘skipLabel‘:‘跳过‘,‘doneLabel‘:‘完成‘}).start();
复制
设置方法(单个参数设置)
关键字:setOption
- introJs().setOption("prevLabel","上一步").start();
复制
页面分布引导的元素设置:
- <div id="demo" data-step="1" data-intro="这里是分布引导的内容……" data-position="right">
- </div>
复制
说明:
- data-step:第几步
- data-intro:分布引导的内容
- data-position:引导内容显示位置,
复制
参数:left,right,top,bottom(不解释)
下载
Intro.js 网站演示
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。