首頁  >  文章  >  web前端  >  jquery.guide.js新版上線

jquery.guide.js新版上線

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

本文主要介紹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外掛ImgAreaSelect實作頭像上傳預覽與裁切功能

##jQuery外掛imgAreaSelect實例解說

詳解jquery外掛程式jquery.viewport.js#

以上是jquery.guide.js新版上線的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn