首先，欢迎jquery.guide.js

网站上线或者改版的时候，经常会作为操作指南，告诉用户一些重要的操作去了哪里，或者隐藏了一些有趣的东西在哪里等等。虽然我直接关闭或者快速跳过，但是对于一些用户来说还是很有用的。

这个提示更好的交互效果是使用了一个空心半透明的蒙版，视觉强调一目了然，像这样：

去年写了一篇题为《腾讯魏云黑面具指导更好的CSS实现面具》的文章，介绍了如何利用单个标签实现类似的交互效果。其中，核心技能是使用CSS边框属性，即周围的黑色半透明遮罩实际上是半透明边框。

后来我找到了更好的实现方式，那就是使用CSS outline属性，这是一个元素的轮廓，不增加任何元素的大小，也不破坏原有的布局。所以我们只需要设置一个非常非常大的轮廓宽度值，定位的时候总是会自然的将元素挖空，不需要计算上下左右半透明黑色区域的大小。guide { outline : 9999 px solid rgba(0，0，0， 75)；}最近正好有一个需求类似的改版项目。基于这个原理，我将修剪一个jQuery插件，命名为jquery.guide.js，专门用来实现黑色半透明蒙版镂空的引导效果。

示例演示地址：演示地址戳在这里

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

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

1.简单易用，不引入CSS资源，直接引入JS即可；2.支持浏览器滚动和缩放重定位；3.支持浏览器键盘操作，如上下键和左右键上下走，ESC键退出等。4.支持对页面上异步呈现的元素的指导；5.内置提示检测，即只提示一次的内置处理，基于localStorage做出第一判断；6.兼容IE8浏览器；

然后，一些懒惰的地方：

1.默认情况下使用outline属性，因此不支持圆角。如果想要达到类似下图的效果：

可以使用CSS box-shadow属性来模拟半透明蒙版效果，这个效果已经在jquery.guide.js源代码中为大家准备好了，如下图所示：

正如源代码中的注释所说，如果你想支持圆角，就对上面的轮廓进行注释，放开下面两行框影和边框半径的注释。guide { box-shadow : 0 0 9999 px rgba(0，0，0， 75)；边界半径：50%；} box-shadow : 000 999px表示原位阴影扩展999px，从用户的角度来看，是一个全屏黑色半透明蒙版。

至于不支持CSS3框影和边框半径的IE8浏览器，还是轮廓直角效果。

2.z-index级别和半透明蒙版层的透明度不作为参数发布，因为新手指导提示基本都是一次性的。如果觉得Z-index级别的透明度或者不透明度不尽如人意，可以直接修改JS源代码。

第三，jquery.guide.js小部件的语法和使用

语法如下：

$.指南(选项)；其中，options为数组，数组项为格式一致、提示信息相关参数的对象。此对象的统一默认值是：

var defaults={ selector: ' '，content: ' '，align: 'center '，offset: { x: 0，y: 0 } }像这样使用它：

$.guide([{ selector : ' # target ' }])；其中：

选择器指示要挖空并暴露的目标元素的选择器。如果选择器可以匹配多个元素，则选择要匹配的第一个元素将用作目标元素。如果元素不匹配，整个参数对象将被忽略。内容表示在挖空区域显示的额外内容，可以是一个HTML字符串或jQuery包装对象。对齐表示显示内容的对齐方式，无论是左对齐、居中对齐还是右对齐。可选关键字值包括：左、中、右，其中中为默认值。Offset表示offset的水平和垂直距离，x为水平偏移位置，计算规则与align参数值相关，y表示垂直偏移距离，其中内容提示内容默认不是顶部对齐，而是相对于挖空暴露的目标元素下边缘向上对齐5个像素。

眼见为实，演示页面开始了，你可以点击这里

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

脚本src='http:/jquery . min . js '/script script src=' http :/jquery . guide . js '/script script $。指南([{ selector: '。logo '，content : ' img src=' http : guide-1 . png ' '，align: 'left'}，{ selector: '。ad img '，content : ' img src=' http : guide-2 . png ' ' }，{ selector: '#back '，content : ' img src=' http : guide-3 . png '，align: 'left'}，{ selector: '。demo img '，content : ' img src=' http : guide-4 . png ' ' }])；/script这个演示页面经过特殊处理，方便演示，每次刷新都会显示提示效果。实际使用中不会有这样的问题，只会显示一次，不用担心。

四.结束语

如果不是什么大事，就不会放在github上。如果您有幸加入我们，有任何问题，欢迎以评论的形式反馈。