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. 使用Javascript实现跳转页面和打开新窗口的方法

    1.在原来的窗体中直接跳转用 window.location.href="你所要跳转的页面url"; 2.在新窗体中打开页面用: window.open('你所要跳转的页面url' ...

  2. 网络工程实训_2路由器基本配置及IOS介绍

    实验2:路由器基本配置及IOS介绍.包括:CLI的使用与IOS基本命令:配置文件的备份和IOS的备份:CDP协议. 一.实验目的 1.熟悉路由器CLI的各种模式: 2.熟悉路由器CLI的各种编辑命令: ...

  3. Openjudge计算概论-计算矩阵边缘元素之和

    /*======================================================================== 计算矩阵边缘元素之和 总时间限制: 1000ms ...

  4. PostgreSQL数据的导出导入

    PostgreSQL数据的导出导入 导出PostgreSQL数据库中的数据: $ pg_dump -U postgres  -f mydatabase.sql  mydatabase 导入数据时首先创 ...

  5. 64位python安装MySQL-python 1.2.5

    在64位的python直接安装MySQL-python 1.2.5有问题,参考http://www.linuxfly.org/windows_install_mysql_python_library/ ...

  6. Centos7下配置Tomcat7以指定(非root)身份运行

    通常情况下,在配置Tomcat生产环境时,通常会配置Tomcat以特定的身份运行(非root),这样有利于提高安全性,防止网站被黑后的进一步权限提升. 本文依赖的环境: Ubuntu(其实大部分同样适 ...

  7. [linux] linux 破解版confluence安装

    OS  centos 6.5  需要的安装包如下: jre-7u67-linux-x64.rpm atlassian-confluence-5.4.4-x64.bin mysql-connector- ...

  8. SharePoint 2010 最佳实践学习总结------第1章 SharePoint Foundation开发基础

    ----前言 这段时间项目出在验收阶段,不是很忙,就潜心把SharePoint学一下,不求有多深刻,初衷只是先入门再说.后续会发布一系列的学习总结.主要学习的书籍为<SharePoint2010 ...

  9. C# Color Table颜色对照表

    .AliceBlue 240,248,255 .LightSalmon 255,160,122 .AntiqueWhite 250,235,215 .LightSeaGreen 32,178,170 ...

  10. Hibernate延迟加载机制详解

    摘自 http://blog.chinaunix.net/uid-20577907-id-3129234.html 1 延迟加载: 延迟加载机制是为了避免一些无谓的性能开销而提出来的,所谓延迟加载就是 ...