intro.js是一个用于制作网页引导效果的js插件,用法很简单,intro.js.v2.0.rar

1.在需要的页面添加引用

  intro.js

  introjs.css

这两个文件已经足够,但是文件夹themes中是不同的样式,如果需要也可以引入喜欢的样式

文件夹example中是demo,大家也可以照葫芦画瓢

2.参数说明

this._options = {
/* 下一步按钮的显示名称 */
nextLabel: 'Next →',
/* 上一步按钮的显示名称 */
prevLabel: '← Back',
/* 跳过按钮的显示名称 */
skipLabel: 'Skip',
/* 结束按钮的显示名称 */
doneLabel: 'Done',
/* 引导说明框相对高亮说明区域的位置 */
tooltipPosition: 'bottom',
/* 引导说明文本框的样式 */
tooltipClass: '',
/* 说明高亮区域的样式 */
highlightClass: '',
/* 是否使用键盘Esc退出 */
exitOnEsc: true,
/* 是否允许点击空白处退出 */
exitOnOverlayClick: true,
/* 是否显示说明的数据步骤*/
showStepNumbers: true,
/* 是否允许键盘来操作 */
keyboardNavigation: true,
/* 是否按键来操作 */
showButtons: true,
/* 是否使用点点点显示进度 */
showBullets: true,
/* 是否显示进度条 */
showProgress: false,
/* 是否滑动到高亮的区域 */
scrollToElement: true,
/* 遮罩层的透明度 */
overlayOpacity: 0.8,
/* 当位置选择自动的时候,位置排列的优先级 */
positionPrecedence: ["bottom", "top", "right", "left"],
/* 是否禁止与元素的相互关联 */
disableInteraction: false,
/* 默认提示位置 */
hintPosition: 'top-middle',
/* 默认提示内容 */
hintButtonLabel: 'Got it'
};

只需要在需要引导说明的标签上加入如下属性,插件就自动将当前标签区域高亮选中,另外附加说明

<div data-step="1" data-intro="这里是步骤1!"></div>
<div data-step="2" data-intro="这里是步骤2!"></div>
<div data-step="3" data-intro="这里是步骤3!"></div>

另外还有两个比较有用的方法

oncomplete 选中“跳过”按钮回调方法

onexit选中“结束”按钮回调方法

一般在页面加载时调用即可:

//访问引导页
function guide() {
introJs().setOptions({
prevLabel: "上一步",
nextLabel: "下一步",
skipLabel: "跳过",
doneLabel: "结束"
}).oncomplete(function () {
//点击跳过按钮后执行的事件
}).onexit(function () {
//点击结束按钮后, 执行的事件
}).start();
}

效果如下:

网站引导页插件intro.js 的用法的更多相关文章

  1. html5跟随鼠标炫酷网站引导页动画特效

    html5跟随鼠标炫酷网站引导页动画特效一款非常不错的引导页,文字效果渐变,鼠标跟随出绚丽的条纹.html5炫酷网站引导页,鼠标跟随出特效. 体验效果:http://hovertree.com/tex ...

  2. 网站引导页flash动画跳转js脚本

    if (getCookie("guidance") == null) { document.cookie = "guidance=true"; window.l ...

  3. 移动端翻页插件dropload.js(支持Zepto和jQuery)

    一. 声明 代码来源:github上的dropload项目. 二. 问题 dropload.js提供了最基本的上拉翻页,下拉刷新功能.对于由服务端一次返回所有数据的情况基本通用. 但是,需求往往不是服 ...

  4. jQuery插件实现的页面功能介绍引导页效果

    新产品上线或是改版升级,我们会在用户第一次使用产品时建立一个使用向导,引导用户如何使用产品,如使用演示的方式逐一介绍界面上的功能模块,从而提升了用户体验和产品的亲和力. Helloweba.com之前 ...

  5. 网站功能操作分布引导插件:Intro.js介绍;React里如何使用Intro.js以及如何进行分页导航

    插件作用:使用向导,引导新用户正确使用Web网站.我的环境是React+Mobx. 基本使用介绍,参加代码地址里的README.md:https://github.com/usablica/intro ...

  6. Js用户引导插件intro

    1.demo直接贴上来了,有什么不懂的,直接去官网上看,地址:https://introjs.com/. 2.这个intro插件的版本是v2.7.0,复制下来代码,引入库应该直接可以运行. 3.点评一 ...

  7. intro.js 页面引导简单用法

    下载地址:http://pan.baidu.com/share/link?shareid=1894002026&uk=1829018343 <!DOCTYPE HTML PUBLIC & ...

  8. 网页引导:jQuery插件实现的页面功能介绍引导页效果

    现在很多网站不仅是介绍,更多的是有一些功能,怎么样让客户快速的知道网站有哪些功能呢?这里pagewalkthrough.js插件能帮我们实现,它是一个轻量级的jQuery插件,它可以帮助我们创建一个遮 ...

  9. Intro.js 网站演示

    Intro.js 为您的网站和项目提供一步一步的.更好的介绍 使用简单 引入 js 和 css,然后在代码中加入步骤和介绍. 快速小巧 7 KB 的 JavaScript 和 3 KB CSS,就是全 ...

随机推荐

  1. android中的EditView控件

    android中的EditView控件 EditText继承关系:View-->TextView-->EditText ,EditText是可编辑文本框 1.EditText默认情况下,光 ...

  2. R提高篇(一): 输入输出

    目录: 文本输出 图形输出 数据输入 数据框输出 文本导入 Excel导入 文本输出 语法: sink(file = NULL, append = FALSE, type = c("outp ...

  3. [nginx]Nginx禁止访问robots.txt防泄漏web目录

    关于robots.txt文件:搜索引擎通过一种程序robot(又称spider),自动访问互联网上的网页并获取网页信 息.您可以在您的网站中创建一个纯文本文件robots.txt,在这个文件中声明该网 ...

  4. 激活Maven profile的几种方式

    首先简单介绍下 Maven 的 profile 是什么.对于人来说,profile 是指人的肖像,轮廓,比如论坛里每个人注册了帐号后,可以设置自己的 profile,放上照片,介绍等等.对于 Mave ...

  5. svn 分支

    网上的SVN分支的教程真的不好用,我这里自己写的,绝对靠谱: SVN的分支跟GIT的分支不一样,SVN的分支,包括文件夹的分支或者是文件的分支,都是重复复制文件的,步骤如下: 1.branch/tag ...

  6. 报错:org.apache.jasper.JasperException: /index.jsp (line: 1, column: 17) equal symbol expected

    现象:写了如下一个jsp文件,导入需要用到的两个包: 运行结果报错:org.apache.jasper.JasperException: /index.jsp (line: 1, column: 17 ...

  7. System.ArgumentOutOfRangeException: 年、月和日参数描述无法表示的 DateTime。

    c#日期控件 格式设为 yyyy-MM,通过updown 方式调整日期. 当为月度最后一天,且要调整月没有当前月的最后一天时,就会报标题错误. 如:当前为1月31日,要调整为2月时,就会报错.因为2月 ...

  8. 【转 】实战手记:让百万级数据瞬间导入SQL Server

    想必每个DBA都喜欢挑战数据导入时间,用时越短工作效率越高,也充分的能够证明自己的实力.实际工作中有时候需要把大量数据导入数据库,然后用于各种程序计算,本文将向大家推荐一个挑战4秒极限让百万级数据瞬间 ...

  9. Team Foundation Server

    概述 (通常记作“TFS”) 是一种为 Microsoft 产品提供 源代码管理. 数据收集. 报告和项目跟踪,而为协作 软件开发 的项目. 可作为独立的软件,或 Visual Studio Team ...

  10. Chrome开发者工具详解(2)

    Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Network面板.Timeline面板.Profiles面板.Application面板.Sec ...