這篇文章將為大家詳細(xì)講解有關(guān)Smartour如何實(shí)現(xiàn)網(wǎng)頁(yè)導(dǎo)覽，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

公司主營(yíng)業(yè)務(wù)：網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶(hù)真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)建站是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶(hù)帶來(lái)驚喜。創(chuàng)新互聯(lián)建站推出紫金免費(fèi)做網(wǎng)站回饋大家。

具體如下：

在遇到網(wǎng)頁(yè)內(nèi)容有著較大調(diào)整的時(shí)候，往往需要一個(gè)導(dǎo)覽功能去告訴用戶(hù)，某某功能已經(jīng)調(diào)整到另外一個(gè)位置。比較常規(guī)的辦法是添加一個(gè)蒙層，高亮顯示被調(diào)整的區(qū)域，然后通過(guò)文字介紹去完成引導(dǎo)。我們把這個(gè)功能稱(chēng)為“導(dǎo)覽”，而 Smartour 則把這個(gè)導(dǎo)覽的功能抽離出來(lái)，提供了一個(gè)開(kāi)箱即用的解決方案。

項(xiàng)目地址：https://github.com/jrainlau/smartour
官方示例：https://jrainlau.github.io/smartour/

Install

Smartour 被構(gòu)建成了 umd 和 es module 模塊，允許用戶(hù)通過(guò)不同的方式引入。

npm install smartour

/* ES Modules */
import Smartour from 'smartour/dist/index.esm.js'
/* CommandJS */
const Smartour = require('smartour')
/* 

基本用法

Smartour 提供了一個(gè)非常簡(jiǎn)單的 API focus(), 這是高亮一個(gè)元素最簡(jiǎn)單的方式。

let tour = new Smartour()

tour.focus({
 el: '#basic-usage'
})

插槽 Slot

插槽 slot 是用于為高亮元素提供描述的 html 字符串。

純字符串:

let tour = new Smartour()

tour.focus({
 el: '#pure-string',
 slot: 'This is a pure string'
})

Html 字符串

let tour = new Smartour()

tour.focus({
 el: '#html-string',
 slot: `
  

   
This is a html string
  
 `
})

插槽位置

插槽的位置可以選擇4個(gè)不同的方向: top, right, left, bottom.

設(shè)置 options.slotPosition 屬性即可覆蓋默認(rèn)的 top 位置。

let tour = new Smartour()

tour.focus({
 el: '#slot-positions',
 slot: `top`,
 options: {
  slotPosition: 'top' // 默認(rèn)為 `top`
 }
})

插槽事件

插槽所定義的元素也可以綁定事件。我們通過(guò) keyNodes 屬性來(lái)為插槽元素綁定事件。

keyNodes 是內(nèi)容為一系列 keyNode 的數(shù)組。 屬性 keyNode.el 是一個(gè) css 選擇器，而 keyNode.event 屬性則是對(duì)應(yīng)元素所綁定的事件。

let tour = new Smartour()

tour.focus({
 el: '.slot-events-demo',
 options: {
  slotPosition: 'right'
 },
 slot: `

   Click here to occur an alert event
  

   Click here to occur an alert event
  
 `,
 keyNodes: [{
  el: '.occur-1',
  event: () => { alert('Event!!') }
 }, {
  el: '.occur-2',
  event: () => { alert('Another event!!') }
 }]
})

Queue

有的時(shí)候頁(yè)面需要不止一個(gè)導(dǎo)覽。Smartour 允許你把一系列的導(dǎo)覽通過(guò) .queue() 放在一起，然后挨個(gè)挨個(gè)地展示它們。

舉個(gè)例子:

let tour = new Smartour()

tour
 .queue([{
  el: '.li-1',
  options: {
   layerEvent: tour.next.bind(tour)
  },
  slot: 'This is the 1st line.'
 }, {
  el: '.li-2',
  options: {
   layerEvent: tour.next.bind(tour)
  },
  slot: 'This is the 2nd line.'
 }, {
  el: '.li-3',
  options: {
   layerEvent: tour.next.bind(tour)
  },
  slot: 'This is the 3rd line.'
 }])
 .run() // 別忘了調(diào)用 `run()` 方法去展示第一個(gè)導(dǎo)覽

選項(xiàng)

Smartour 是一個(gè)構(gòu)建函數(shù)，它接收一個(gè) options 參數(shù)去覆蓋其默認(rèn)選項(xiàng)

讓我們看看它的默認(rèn)選項(xiàng)是什么樣子的：

{
 prefix: 'smartour', // class 前綴
 padding: 5, // 高亮區(qū)域內(nèi)邊距
 maskColor: 'rgba(0, 0, 0, .5)', // 帶透明值的遮罩層顏色
 animate: true, // 是否使用動(dòng)畫(huà)
 slotPosition: 'top' // 默認(rèn)的插槽位置
 layerEvent: smartour.over // 遮罩層點(diǎn)擊事件，默認(rèn)為結(jié)束導(dǎo)覽
}

APIs

除了 .focus()，.queue() 和 .run() API 以外，Smartour 還提供了另外三個(gè) API 專(zhuān)門(mén)用于控制導(dǎo)覽的展示。

• .next()：展示下一個(gè)導(dǎo)覽（只能配合 .queue() 使用）。

• .prev()：展示上一個(gè)導(dǎo)覽（只能配合 .queue() 使用）。

• .over()：結(jié)束全部導(dǎo)覽。

Smartour 的原理

Smartour 通過(guò) element.getBoundingClientRect() api 來(lái)獲取目標(biāo)元素的寬高和位置信息，然后放置一個(gè)帶著 box-shadow 樣式的元素在其之上作為高亮區(qū)域。

由于點(diǎn)擊事件無(wú)法再 box-shadow 的區(qū)域里觸發(fā)，所以 Smartour 還放置了一個(gè)全屏透明的遮罩層用于綁定 layerEvent 事件。

高亮區(qū)域和插槽都被設(shè)置為 absolute。當(dāng)頁(yè)面滾動(dòng)時(shí)，document.documentElement.scrollTop 或者 document.documentElement.scrollLeft 的值就會(huì)變化，然后 Smartour 會(huì)實(shí)時(shí)修正它的位置信息。

證書(shū)

MIT

關(guān)于“Smartour如何實(shí)現(xiàn)網(wǎng)頁(yè)導(dǎo)覽”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。