一、有請(qǐng)jquery.guide.js

網(wǎng)站上線或者改版的時(shí)候，常常會(huì)做一個(gè)操作向?qū)?，告訴用戶一些重要操作到了哪里，或者什么地方隱藏了什么好玩的東西，等等，雖然我都是直接關(guān)掉的，或者快速跳過，但是對(duì)有部分用戶而言還是很有用的。

這種提示比較好的交互效果是采用鏤空的半透明遮罩，視覺重點(diǎn)一目了然，類似這樣：

我在去年的時(shí)候曾經(jīng)寫了一篇文章，名為“ 騰訊微云黑色遮罩引導(dǎo)蒙版更好的CSS實(shí)現(xiàn)方式 ”，介紹如何使用單標(biāo)簽，實(shí)現(xiàn)類似的交互效果，其中，核心技巧是使用了CSS border 屬性，也就是周圍的黑色半透明遮罩實(shí)際上是半透明邊框。

后來我發(fā)現(xiàn)了一種更好的實(shí)現(xiàn)方式，就是使用CSS outline 屬性， outline 屬性為元素的輪廓，并不會(huì)增加任何元素的尺寸，也不會(huì)干擾原先的布局，因此我們只需要設(shè)一個(gè)非常非常大的 outline 寬度值，我們定位元素就永遠(yuǎn)天然鏤空，根本不需要計(jì)算上下左右的半透明黑色有多大。

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

最近正好有個(gè)改版項(xiàng)目有類似的需求，我要基于這個(gè)原理順便整了一個(gè)jQuery插件，名為jquery.guide.js，專門用來實(shí)現(xiàn)黑色半透明遮罩鏤空提示引導(dǎo)效果。

實(shí)例demo地址： demo地址戳這里

二、jquery.guide.js小插件的優(yōu)勢(shì)

jquery.guide.js 小插件的優(yōu)勢(shì)如下：

1.使用方便，直接引入JS就好了，無需引入CSS資源；
2.支持瀏覽器的滾動(dòng)以及縮放的重定位；
3.支持瀏覽器鍵盤操作，如上下鍵和左右鍵上一步下一步，ESC鍵退出等；
4.支持頁(yè)面異步呈現(xiàn)的元素的引導(dǎo)；
5.內(nèi)置是否提示檢測(cè)，也就是內(nèi)置只會(huì)提示一次的處理，基于localStorage進(jìn)行首次判斷；
6.兼容到IE8瀏覽器；

然后，一些偷懶的地方：

1. 默認(rèn)是使用 outline 屬性實(shí)現(xiàn)的，因此不支持圓角，如果你想實(shí)現(xiàn)類似下圖的效果：

則可以使用CSS box-shadow 屬性模擬半透明遮罩效果，在 jquery.guide.js 源代碼中，其實(shí)已經(jīng)給大家都準(zhǔn)備好了，如下圖：

正如源代碼中的注釋所言，如果想支持圓角，注釋上面的 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 表示原地陰影擴(kuò)展 9999px 的意思，再用戶看來，就是一個(gè)滿屏黑色半透明的遮罩。

至于不支持CSS3 box-shadow 和 border-radius 的IE8瀏覽器還是 outline 直角效果。

2.z-index 層級(jí)以及半透明遮罩層的透明度都沒有作為參數(shù)放開，因?yàn)樾率忠龑?dǎo)提示基本都是一次性的，如果大家覺得 z-index 層級(jí)或者 opacity 透明度不滿意，直接修改JS源代碼即可。

三、jquery.guide.js小插件的語(yǔ)法和使用

語(yǔ)法如下：

$.guide(options);

其中， options 為數(shù)組，數(shù)組項(xiàng)為格式一致的包含提示信息相關(guān)參數(shù)的對(duì)象，這個(gè)對(duì)象統(tǒng)一的默認(rèn)值為：

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

使用時(shí)候類似這樣：

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

其中：

•selector 表示需要鏤空暴露的目標(biāo)元素的選擇器，如果該選擇器可以匹配多個(gè)元素，則使用該選擇去匹配的第一個(gè)元素作為目標(biāo)元素；如果無法匹配元素，則整個(gè)這個(gè)參數(shù)對(duì)象會(huì)被忽略。
•content 表示鏤空區(qū)域內(nèi)額外顯示的內(nèi)容，可以是HTML字符串，也可以是jQuery包裝器對(duì)象。
•align 表示顯示內(nèi)容的對(duì)齊方式，是左對(duì)齊居中對(duì)齊還是右對(duì)齊？可選關(guān)鍵字值包括： left , center , right . 其中 center 是默認(rèn)值。
•offset 表示偏移的水平垂直距離， x 那是水平偏移位置，計(jì)算規(guī)則與 align 參數(shù)值有關(guān)， y 表示垂直偏移距離，其中 content 提示內(nèi)容默認(rèn)不是頂對(duì)齊，而是相對(duì)于鏤空暴露的目標(biāo)元素下邊緣往上 5 像素對(duì)齊。

眼見為實(shí)，demo頁(yè)面走起

demo頁(yè)面共設(shè)置了 4 個(gè)提示元素，相關(guān)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頁(yè)面為了演示方便，做了特殊處理，每次刷新都會(huì)顯示提示效果。實(shí)際使用的時(shí)候是不會(huì)有這樣的問題的，只會(huì)顯示一次，無需擔(dān)心。

四、結(jié)束語(yǔ)

并不是什么了不起的東西，就不放在github上了，如果大家有幸捧場(chǎng)使用，遇到什么問題，歡迎評(píng)論的形式進(jìn)行反饋。

最新評(píng)論