最近因为项目要用到首次进入网站的操作提示，类似游戏引导。发现EnjoyHint挺好用的，网上文档又比较少，于是做以下记录。
EnjoyHint，为网站或Web应用程序提供最简单的方法来创建交互式教程和提示。它还可以用来突出和标识应用程序元素。
需要引用：
<link href="enjoyhint/enjoyhint.css" rel="stylesheet">
<script src="js/jquery-3.1.1.min.js"></script>
<script src="enjoyhint/enjoyhint.min.js"></script>
作者github及下载地址：
https://github.com/xbsoftware/enjoyhint
一、配置
selector : 选择的元素（id，class，name）。
description : 提示的内容。
keyCode ：当event为key时，用来定义具体的keyCode值。
event_selector ：如果需要将事件（设置在“事件”属性中）附加到其他选择器，则可以使用此选项。
timeout ：超时-在一个元素被突出显示之前的延迟。
shape:显示的形状，可使用(circle/reat)。
radius ：若shape是cicle，则可以使用该属性定义圆大小。
margin ：shape是reat时，显示面积的大小。
top | bottom | right | left：可以定义显示的具体位置。
scrollAnimationSpeed：设置scroll的速度。
nextButton ：可以定义next按钮的class和text。
skipButton ：可以定义skip按钮的class和text。
var options = { "next #block": 'Hello.', "nextButton" : {className: "myNext", text: "NEXT"}, "skipButton" : {className: "mySkip", text: "SKIP"}, }showSkip ：(true | false)，是否显示skip按钮。
showNext ：(true | false)，是否显示next按钮。
二、非标准事件（event_type)：
1、auto : 你需要在第一步之后点击第二步上的同一按钮，然后进入下一步。event：'click'；event_type:'auto'。
2、custom：需要在应用程序代码中按事件进行下一步。比如：在应用程序中加载了一些数据之后才进入下一步，event_type使用custom，和trigger方法。
$.get('/load/some_data', function(data){ //trigger method has only one argument: event_name.(equal to the value of event property in step config) enjoyhint_instance.trigger('custom_event_name'); });3、next：event_type后使用，能看见下一步按钮。
4、key：使用keyCode来定义如何进入下一步。例如，event_type:key,'keyCode':13,表示回车进入下一步。
三、方法
1、set：设置当前的步骤配置。参数：配置
2、run：运行当前脚本。没有参数
3、resume：恢复-从停止的步骤恢复脚本。没有参数
4、getCurrentStep：返回当前步骤索引
5、trigger：触发器-在编写此代码后，您可以移动到下一个步骤，或者用SelpHytt（Next Skip）结束。
四、事件
1、onStart: 第一步开始的时候事件。
2、onEnd:最后一步结束的时候事件。
3、onSkip:用户点击skip的时候事件。
var enjoyhint_instance = new EnjoyHint({ onEnd:function(){ alert（'结束了！'); }});4、onBeforeStart :在这一步开始之前。例如要选中二级菜单，可使用点击事件打开第一级菜单。
var enjoyhint_script_steps = [ { selector:'.some_btn',//jquery selector event:'click', description:'Click on this btn', onBeforeStart:function(){ //do something } }];五、例子
1、常规使用例子
//initialize instancevar enjoyhint_instance = new EnjoyHint({});//simple config. //Only one step - highlighting(with description) "New" button //hide EnjoyHint after a click on the button.var enjoyhint_script_steps = [ { 'click .new_btn' : 'Click the "New" button to start creating your project' } ];//set script configenjoyhint_instance.set(enjoyhint_script_steps);//run Enjoyhint scriptenjoyhint_instance.run();其中的具体步骤（enjoyhint_script_steps），可以这样写：
1、
var enjoyhint_script_steps = [ { 'next .navbar-brand' : '欢迎来到我的搜索！让我来引导你了解它的特点。', 'nextButton' : {className: "myNext", text: "可以"}, 'skipButton' : {className: "mySkip", text: "不了!"} }, { 'key #mySearchButton' : "请输入关键词搜索，并按“Enter”进去下一步", 'keyCode' : 13 }, { 'click .btn' : '点击这个按钮，切换下拉菜单，进入下一步' }, { 'next .about' : '检查可用的所有功能的列表', 'shape': 'circle' }, { 'next .contact' : '您的反馈将不胜感激。', 'shape': 'circle', 'radius': 70, 'showSkip' : false, 'nextButton' : {className: "myNext", text: "知道了!"} }];2、
var enjoyhint_script_data =[ { selector:'#person_menu', event:'click', shape:'rect', left:400, top:200, description:'请点击用户', "skipButton" : {text: "退出"}, }, { selector:'#person_info', event:'click', description:'请点击个人设置', "skipButton" : {text: "退出"}, }, { selector:'#menu_1', event_type:'key', keyCode:13, "skipButton" : {text: "退出"}, description:'请点击项目储备!', }, { selector:'#menu_2', event:'click', "skipButton" : {text: "退出"}, description:'请点击基本信息维护!', }, { selector:'#base_info', event:'custom', event_type:'next', "nextButton": {text:"下一步"}, "skipButton" : {text: "退出"}, description:'请点击项目概况!', },
随时随地看视频
