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

一、有请jquery.guide.js

网站上线或者改版的时候，常常会做一个操作向导，告诉用户一些重要操作到了哪里，或者什么地方隐藏了什么好玩的东西，等等，虽然我都是直接关掉的，或者快速跳过，但是对有部分用户而言还是很有用的。

这种提示比较好的交互效果是采用镂空的半透明遮罩，视觉重点一目了然，类似这样：

我在去年的时候曾经写了一篇文章，名为“ 腾讯微云黑色遮罩引导蒙版更好的CSS实现方式 ”，介绍如何使用单标签，实现类似的交互效果，其中，核心技巧是使用了CSS border 属性，也就是周围的黑色半透明遮罩实际上是半透明边框。

后来我发现了一种更好的实现方式，就是使用CSS outline 属性， outline 属性为元素的轮廓，并不会增加任何元素的尺寸，也不会破坏原先的布局，因此我们只需要设一个非常非常大的 outline 宽度值，我们定位元素就永远天然镂空，根本不需要计算上下左右的半透明黑色区有多大。

.guide {
  outline: 9999px solid rgba(0,0,0,.75);
}

最近正好有个改版项目有类似的需求，我要基于这个原理顺便整了一个jQuery插件，名为jquery.guide.js，专门用来实现黑色半透明遮罩镂空提示引导效果。

实例demo地址： demo地址戳这里

二、jquery.guide.js小插件的优势

jquery.guide.js 小插件的优势如下：

1.使用方便，直接引入JS就好了，无需引入CSS资源；
2.支持浏览器的滚动以及缩放的重定位；
3.支持浏览器键盘操作，如上下键和左右键上一步下一步，ESC键退出等；
4.支持页面异步呈现的元素的引导；
5.内置是否提示检测，也就是内置只会提示一次的处理，基于localStorage进行首次判断；
6.兼容到IE8浏览器；

然后，一些偷懒的地方：

1. 默认是使用 outline 属性实现的，因此不支持圆角，如果你想实现类似下图的效果：

则可以使用CSS box-shadow 属性模拟半透明遮罩效果，在 jquery.guide.js 源代码中，其实已经给大家都准备好了，如下图：

正如源代码中的注释所言，如果想支持圆角，注释上面的 outline ，放开下面两行 box-shadow 和 border-radius 的注释就可以了。

.guide {
  box-shadow: 0 0 0 9999px rgba(0,0,0,.75);
  border-radius: 50%;
}

其中 box-shadow: 0 0 0 9999px 表示原地阴影扩展 9999px 的意思，再用户看来，就是一个满屏黑色半透明的遮罩。

至于不支持CSS3 box-shadow 和 border-radius 的IE8浏览器还是 outline 直角效果。