jQuery网站用户引导插件

查看演示立即下载

插件描述：用户进入网站后的蒙层引导，代码里有完整的案例，引导页所需的箭头图片已经打包好，直接用css调用。

使用方法

首先导入相关JS和CSS

<script src="/"></script>
<!-- EnjoyHint JS and CSS files -->
<script src="enjoyhint/enjoyhint.min.js"></script>
<link href="enjoyhint/enjoyhint.css" rel="stylesheet">
<link href="enjoyhint/enjoyhint.css" rel="stylesheet">
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="bootstrap.min.js"></script>
<!-- My style -->
<link rel="stylesheet" href="style.css">

然后在js文件里面创建EnjoyHint对象：

1	`var` `enjoyhint_instance =` `new` `EnjoyHint({});`

指定蒙层弹出的位置，及内容：

var enjoyhint_instance = new EnjoyHint({});
 
var enjoyhint_script_steps = [
  {
      'next .navbar-brand' : '欢迎来到我的搜索！让我来引导你了解它的特点。',
    'skipButton' : {className: "mySkip", text: "不了!"},
      'nextButton' : {className: "myNext", text: "可以"}
       
  },
  {
      'key #mySearchButton' : "请输入关键词搜索，并按“Enter”进去下一步",
      'keyCode' : 13
  },
  {
      'click .btn' : '点击这个按钮，切换下拉菜单，进入下一步'
  },
  {
      'next .about' : '检查可用的所有功能的列表',
      'shape': 'circle'
  },
  {
      'next .contact' : '您的反馈将不胜感激。',
      'shape': 'circle',
      'radius': 70,
      'showSkip' : false,
      'nextButton' : {className: "myNext", text: "知道了!"}
  }
 
];
 
enjoyhint_instance.set(enjoyhint_script_steps);
enjoyhint_instance.run();

然后将内容set进EnjoyHint对象：

1	`enjoyhint_instance.set(enjoyhint_script_steps);`

最后不要忘了使用EnjoyHint的run()方法：

1	`enjoyhint_instance.run();`

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jQuery大转盘插件
下一个特效： jQuery移动端日期选择插件kinerDatePicker.js