jquery.guide.js新版上線操作向導鏤空提示jQuery插件的示例分析

這篇文章主要為大家展示了“jquery.guide.js新版上線操作向導鏤空提示jQuery插件的示例分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“jquery.guide.js新版上線操作向導鏤空提示jQuery插件的示例分析”這篇文章吧。

一、有請jquery.guide.js

網站上線或者改版的時候，常常會做一個操作向導，告訴用戶一些重要操作到了哪里，或者什么地方隱藏了什么好玩的東西，等等，雖然我都是直接關掉的，或者快速跳過，但是對有部分用戶而言還是很有用的。

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

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

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

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

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

實例demo地址： demo地址戳這里

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

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

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

然后，一些偷懶的地方：

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

則可以使用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 直角效果。

2.z-index 層級以及半透明遮罩層的透明度都沒有作為參數放開，因為新手引導提示基本都是一次性的，如果大家覺得 z-index 層級或者 opacity 透明度不滿意，直接修改JS源代碼即可。

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

語法如下：

$.guide(options);

其中， options 為數組，數組項為格式一致的包含提示信息相關參數的對象，這個對象統(tǒng)一的默認值為：

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

使用時候類似這樣：

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

其中：

?selector 表示需要鏤空暴露的目標元素的選擇器，如果該選擇器可以匹配多個元素，則使用該選擇去匹配的第一個元素作為目標元素；如果無法匹配元素，則整個這個參數對象會被忽略。
?content 表示鏤空區(qū)域內額外顯示的內容，可以是HTML字符串，也可以是jQuery包裝器對象。
?align 表示顯示內容的對齊方式，是左對齊居中對齊還是右對齊？可選關鍵字值包括： left , center , right . 其中 center 是默認值。
?offset 表示偏移的水平垂直距離， x 那是水平偏移位置，計算規(guī)則與 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頁面為了演示方便，做了特殊處理，每次刷新都會顯示提示效果。實際使用的時候是不會有這樣的問題的，只會顯示一次，無需擔心。

以上是“jquery.guide.js新版上線操作向導鏤空提示jQuery插件的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道！