1.demo直接贴上来了，有什么不懂的，直接去官网上看,地址：https://introjs.com/。

2.这个intro插件的版本是v2.7.0，复制下来代码，引入库应该直接可以运行。

3.点评一下：
　　a.插件不会自己记录引导的信息，需要手动控制引导是不是执行过
　　b.不在step里提供钩子，而是提供全局的钩子
　　c.在全局钩子里用this._introItems[this._currentStep]找到当前的
　　d.可以在step里定义自己的函数，然后在全局钩子里调用
　　e.不能动态生成节点
　　f.backdrop的时候，点下一步不会闪
　　g.提供hints的支持
　　h.element为id的时候没啥说的，为class的时候，第一个匹配上的class出现引导

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link href="introjs.css" type="text/css" rel="stylesheet" />

<script src="jquery-2.1.4.js"></script>

<script type="text/javascript"  src="intro.js"></script>

<script type="text/javascript">

    $(function(){

        intro = introJs();

        intro.setOptions({

            prevLabel:"<",

            nextLabel:">",

            skipLabel:"skip",

            doneLabel:"done",

            steps: [

                {

                    element: '#div1',

                    intro: '1~~',

                    position: 'right'

                },

                {

                    element: '#div2',

                    intro: '2~~',

                    position: 'right'

                },

                {

                    element: '.div3',

                    intro: '<a href="www.cnblogs.com">3</a>~~',

                    position: 'bottom'

                }

            ],

            hints: [

                {

                    element: '#div1',

                    hint: "This is a tooltip.",

                    hintPosition: 'top-middle'

                },

                {

                    element: '#div2',

                    hint: 'More features, more fun.',

                    position: 'left'

                },

                {

                    element: '.div3',

                    hint: "<b>Another</b> step.",

                    hintPosition: 'top-middle'

                }

            ]

        });

        intro.onbeforechange(function(targetElement) {

           console.log(this)  // this._introItems[this._currentStep]

        });

        intro.start();

    });

</script>

</head>

<body>

    <div id="div1" style="width:150px;height:50px;">1</div>

    <div id="div2" style="width:150px;height:50px;">2</div>

    <div class="div3" style="width:150px;height:50px;">3</div>

    <button onclick="intro.addHints()">addHint</button>

</body>

</html>

Js用户引导插件intro的更多相关文章

  1. Js用户引导插件bootstrap-tour

    1.demo直接贴上来了,有什么不懂的,直接去官网上看,地址:http://bootstraptour.com/. 2.这个bootstrap-tour插件的版本是v0.12.0,复制下来代码,引入库 ...

  2. BlueDream.js(蓝梦)——jQuery网站使用引导插件

    小菜在前端世界游荡有些时间了,常见的插件多少有些了解,但却很少看到用户引导插件. 所谓用户引导插件,就是在第一次使用某个网站时,会弹出一些小动画,告诉你网站的基本使用方法,帮你快速入门. 这应该是个常 ...

  3. vue 用driver 添加用户引导

    npm 安装: npm install driver.js //用户引导 import Driver from 'driver.js' import 'driver.js/dist/driver.mi ...

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

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

  5. 自定义Angular插件 - 网站用户引导

    最近由于项目进行了较大的改版,为了让用户能够适应这次新的改版,因此在系统中引入了“用户引导”功能,对于初次进入系统的用户一些简单的使用培训training.对于大多数网站来说,这是一个很常见的功能.所 ...

  6. 推荐15款最佳的 jQuery 分步引导插件

    当用户浏览到一个网站,它可能从不知道如何浏览,如何操作网站或 Web 应用程序的内容和流程.在这篇文章中,我们编制了一些最好的 jQuery 引导插件列表.你会发现这些插件对于提高你的网站的整体用户体 ...

  7. 前端分布引导插件IntroJs的使用

    在用户第一次使用网站的时候,一般会提供新手引导的提示,提示用户重要的功能使用,实现方法比较多,但是有一点,屏幕的自适应问题,大多数自己写的实现方法无非就是一个div遮罩层,然后再需要指引的位置放置一张 ...

  8. 给Chrome和Firefox添加js脚本作为插件的方法

    为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/ShiJiaqi. http://www.cnblogs.com/shijiaqi1066/p/5973141. ...

  9. 原生js版分页插件

    之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件,今天简单改造了一下,改成了原生JavaScript版本的分页插件,可以自定义一些简单配置,特此记录下来.如有不足之处,欢迎指 ...

随机推荐

  1. Android Volley框架的几种post提交请求方式

    首先简单描述一下Google的Android开发团队在2013年推出的一个网络通信框架Volley.它的设计目标是进行数据量不大,但通信频繁的网络操作,而对于大数据量的网络操作,比如下载文件等,Vol ...

  2. Spring mvc 注解@ResponseBody 返回内容编码问题

    @ResponseBody 在@Controller 类方法中能够让字符串直接返回内容. 其返回处理的类是org.springframework.http.converter.StringHttpMe ...

  3. 通过虚拟驱动vivi分析摄像头驱动

    Linux摄像头驱动学习之:(二)通过虚拟驱动vivi分析摄像头驱动 一.通过指令 "strace -o xawtv.log xawtv" 得到以下调用信息: // 1~7都是在v ...

  4. C++语言基础(4)-构造函数和析构函数

    一.构造函数 类似于java,C++中也有构造函数的概念,相关用法如下: 1.1 构造函数的定义 #include <iostream> using namespace std; clas ...

  5. 如何在Linux下统计高速网络中的流量

    参考: http://www.geekfan.net/5558/ http://blog.jobbole.com/23638/ http://www.csdn.net/article/2014-03- ...

  6. Navicat for MySQL 之数据库迁移

    1.将数据库下的表迁移出来 2.将表全部迁入另一个数据库 重新连接数据库看看吧!

  7. selenium 自动化工具

    问题 今天在使用selenium+PhantomJS动态抓取网页时,出现如下报错信息: UserWarning: Selenium support for PhantomJS has been dep ...

  8. JavaScript 是脚本语言

    JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编程代码. JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行. JavaScrip ...

  9. ssh 面试

    Struts1工作原理1. 初始化:struts框架的总控制器ActionServlet是一个Servlet,它在web.xml中配置成自动启动的Servlet,在启动时总 控制器会读取配置文件(st ...

  10. 这篇文章主要为大家详细介绍了jQuery密码强度验证控件使用详解的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

    本文实例为大家分享了jQuery密码强度验证控件,供大家参考,具体内容如下 <html>   <head>     <meta http-equiv="Cont ...