jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)

2.z-index 层级以及半透明遮罩层的透明度都没有作为参数放开，因为新手引导提示基本都是一次性的，如果大家觉得 z-index 层级或者 opacity 透明度不满意，直接修改JS源代码即可。

三、jquery.guide.js小插件的语法和使用

语法如下：

$.guide(options);

其中， options 为数组，数组项为格式一致的包含提示信息相关参数的对象，这个对象统一的默认值为：

var defaults = {
  selector: '',
  content: '',
  align: 'center',
  offset: {
    x: 0,
    y: 0
  }
};

使用时候类似这样：

$.guide([{
  selector: '#target'
}]);

其中：

•selector 表示需要镂空暴露的目标元素的选择器，如果该选择器可以匹配多个元素，则使用该选择去匹配的第一个元素作为目标元素；如果无法匹配元素，则整个这个参数对象会被忽略。
•content 表示镂空区域内额外显示的内容，可以是HTML字符串，也可以是jQuery包装器对象。
•align 表示显示内容的对齐方式，是左对齐居中对齐还是右对齐？可选关键字值包括： left , center , right . 其中 center 是默认值。
•offset 表示偏移的水平垂直距离， x 那是水平偏移位置，计算规则与 align 参数值有关， y 表示垂直偏移距离，其中 content 提示内容默认不是顶对齐，而是相对于镂空暴露的目标元素下边缘往上 5 像素对齐。

眼见为实，demo页面走起，您可以狠狠地点击这里： jQuery小插件jquery.guide.js使用demo

demo页面共设置了 4 个提示元素，相关JS使用如下：

<script src="./jquery.min.js"></script>
<script src="./jquery.guide.js"></script>
<script>
$.guide([{
  selector: '.logo',
  content: '<img src="guide-1.png">',
  align: 'left'
}, {
  selector: '.ad img',
  content: '<img src="guide-2.png">'
}, {
  selector: '#back',
  content: '<img src="guide-3.png">',
  align: 'left'
}, {
  selector: '.demo img',
  content: '<img src="guide-4.png">'
}]);
</script>

本demo页面为了演示方便，做了特殊处理，每次刷新都会显示提示效果。实际使用的时候是不会有这样的问题的，只会显示一次，无需担心。

四、结束语

并不是什么了不起的东西，就不放在github上了，如果大家有幸捧场使用，遇到什么问题，欢迎评论的形式进行反馈。