jquery.guide.js新版上線

小云云原創: 2018-01-11 14:27:041197瀏覽

本文主要介紹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 直角效果。

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上了，如果大家有幸捧場使用，遇到什麼問題，歡迎評論的形式進行反饋。

jquery.guide.js新版上線

相關文章