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

創(chuàng)新互聯(lián)長期為上1000+客戶提供的網(wǎng)站建設(shè)服務，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為鳳縣企業(yè)提供專業(yè)的成都做網(wǎng)站、成都網(wǎng)站建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)，鳳縣網(wǎng)站改版等技術(shù)服務。擁有十年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

一、有請jquery.guide.js

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

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

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

后來我發(fā)現(xiàn)了一種更好的實現(xiàn)方式，就是使用CSS outline 屬性， outline 屬性為元素的輪廓，并不會增加任何元素的尺寸，也不會破壞原先的布局，因此我們只需要設(shè)一個非常非常大的 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.內(nèi)置是否提示檢測，也就是內(nèi)置只會提示一次的處理，基于localStorage進行首次判斷；
6.兼容到IE8瀏覽器；

然后，一些偷懶的地方：

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

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

正如源代碼中的注釋所言，如果想支持圓角，注釋上面的 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 層級以及半透明遮罩層的透明度都沒有作為參數(shù)放開，因為新手引導提示基本都是一次性的，如果大家覺得 z-index 層級或者 opacity 透明度不滿意，直接修改JS源代碼即可。

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

語法如下：

$.guide(options);

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

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

使用時候類似這樣：

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

其中：

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

眼見為實，demo頁面走起，您可以狠狠地點擊這里： jQuery小插件jquery.guide.js使用demo

demo頁面共設(shè)置了 4 個提示元素，相關(guān)JS使用如下：

本demo頁面為了演示方便，做了特殊處理，每次刷新都會顯示提示效果。實際使用的時候是不會有這樣的問題的，只會顯示一次，無需擔心。

以上是“jquery.guide.js新版上線操作向?qū)хU空提示jQuery插件的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！