摘要：前言前一陣子忙著找工作面試過(guò)程中碰到一個(gè)感覺(jué)比較有意思的問(wèn)題盡量多的列舉出新手引導(dǎo)動(dòng)畫(huà)的實(shí)現(xiàn)方式昨天稍微總結(jié)了一下實(shí)現(xiàn)了種源碼在最后如果想直接看結(jié)果的可以拉到最后去看這里假設(shè)所有的彈出層都是基于頁(yè)面上原有的元素實(shí)現(xiàn)一復(fù)制目標(biāo)內(nèi)容具體步驟用獲

前一陣子忙著找工作,面試過(guò)程中,碰到一個(gè)感覺(jué)比較有意思的問(wèn)題,盡量多的列舉出新手引導(dǎo)動(dòng)畫(huà)的實(shí)現(xiàn)方式, 昨天稍微總結(jié)了一下, 實(shí)現(xiàn)了4種.源碼在最后,如果想直接看結(jié)果的,可以拉到最后去看.

這里假設(shè)所有的彈出層都是基于頁(yè)面上原有的元素

具體步驟:

用 getBoundingClientRect 獲取目標(biāo)內(nèi)容的顯示位置

復(fù)制一個(gè)目標(biāo)內(nèi)容,并且設(shè)置相對(duì)定位, 定位的數(shù)據(jù)在上一步有獲取到,還要把 z-index 稍微設(shè)置高一點(diǎn)

在復(fù)制內(nèi)容下面,加一層半透明的遮罩層.

核心代碼:

let target = document.querySelector(".mid-center")
let pos = target.getBoundingClientRect()

let clone = target.cloneNode(true)

clone.style.position = "fixed"
clone.style.left = pos.left
clone.style.top = pos.top
clone.style.width = pos.width
clone.style.height = pos.height
clone.style.zIndex = 100

document.body.appendChild(clone)

優(yōu)缺點(diǎn)
比較平凡的實(shí)現(xiàn)方式,普普通通的,沒(méi)啥特色.

具體步驟:

設(shè)置目標(biāo)對(duì)象的 box-shadow 為一個(gè)比較大的,半透明的值

設(shè)置目標(biāo)對(duì)象的 position 為 relative

核心代碼:

let target = document.querySelector(".mid-center")
target.style.boxShadow = "0 0 0 4000px rgba(0, 0, 0, 0.85)"
target.style.position = "relative"

這里設(shè)置 position:relative 是為了讓 box-shadow 陰影不被父容器所擋住. 如果沒(méi)有設(shè)置, box-shadow 會(huì)顯示不全

優(yōu)缺點(diǎn)

優(yōu)點(diǎn): 實(shí)現(xiàn)方式簡(jiǎn)單易懂

缺點(diǎn): box-shadow 是個(gè)比較耗性能的屬性, 而且依靠 position:relative 不知道會(huì)不會(huì)出現(xiàn)無(wú)法覆蓋的問(wèn)題

具體步驟:

用 getBoundingClientRect 獲取目標(biāo)內(nèi)容的顯示位置

用 html2canvas 將目標(biāo)內(nèi)容繪制到上一步獲取的指定位置和大小

核心代碼:

let target = document.querySelector(".mid-center")
let pos = target.getBoundingClientRect()
let w = ~~pos.width
let h = ~~pos.height

let canvas = document.querySelector("#canvas")
canvas.width = document.documentElement.clientWidth
canvas.height = document.documentElement.clientHeight
let ctx = canvas.getContext("2d");
canvas.style.display = "block"

html2canvas(target, {
    width: w,
    height: h,
}).then( (cvs) => {
    ctx.drawImage(cvs, pos.left, pos.top)
})

需要注意的是 這里 canvas.width 和 canvas.height 要手動(dòng)設(shè)置,否則默認(rèn)是 300 * 150,這樣如果在樣式里設(shè)置寬高的話(huà),會(huì)導(dǎo)致畫(huà)布被拉伸.

優(yōu)缺點(diǎn)

優(yōu)點(diǎn): 性能應(yīng)該相對(duì)會(huì)比較好一點(diǎn)(如果html2canvas性能內(nèi)有太差的話(huà)), 用 canvas 實(shí)現(xiàn), 也比較不容易碰到各種層級(jí)遮擋或顯示不全的問(wèn)題.

缺點(diǎn): 實(shí)現(xiàn)方式相對(duì)繁瑣一點(diǎn),而且需要借助外部工具

具體步驟:

給整個(gè)文檔最外層的元素,設(shè)置一個(gè)黑色的底色

遍歷整個(gè)文檔,把非目標(biāo)內(nèi)容,和非目標(biāo)內(nèi)容的父容器,都設(shè)成半透明的

核心代碼:

function showGuidance() {
    let main = document.querySelector(".main")
    main.className += " darkBackGround"
    setOpticity(main)
}

function setOpticity (element) {
    let doms = Array.from(element.children) || []
    let hasMatched = false
    for (let el of doms) {
        if (!el.className.match(/mid-center/i) && el.children.length) {
            hasMatched = setOpticity(el)
        if (!hasMatched) el.className += " halfTransparent"
        } else if(el.className.match(/mid-center/i)) {
            hasMatched = true
        } else {
            el.className += " halfTransparent"
        }
    }
return hasMatched
}

如果不小心把目標(biāo)元素的父元素也設(shè)置成半透明的,那么就算目標(biāo)元素沒(méi)有設(shè)置半透明,也會(huì)變透明,因?yàn)楦冈乩锩娴乃袃?nèi)容,都會(huì)透明

優(yōu)缺點(diǎn)

優(yōu)點(diǎn): 感覺(jué)沒(méi)有優(yōu)點(diǎn)哈

缺點(diǎn): 批量操作 dom, dom 元素多的情況下,性能極差

以上所有實(shí)現(xiàn)方式,均按最簡(jiǎn)單的實(shí)現(xiàn)方式來(lái),未考慮一些特殊情況(如:resize, 有動(dòng)畫(huà)等)
附上 源碼