前言

前一陣子忙著找工作,面試過程中,碰到一個感覺比較有意思的問題,盡量多的列舉出新手引導動畫的實現方式, 昨天稍微總結了一下, 實現了4種.源碼在最后,如果想直接看結果的,可以拉到最后去看.

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

實現一 復制目標內容

具體步驟:

用 getBoundingClientRect 獲取目標內容的顯示位置

復制一個目標內容,并且設置相對定位, 定位的數據在上一步有獲取到,還要把 z-index 稍微設置高一點

在復制內容下面,加一層半透明的遮罩層.

核心代碼:

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 = 100document.body.appendChild(clone) 復制代碼

優缺點 比較平凡的實現方式,普普通通的,沒啥特色.

實現二 利用box-shadow

具體步驟:

設置目標對象的 box-shadow 為一個比較大的,半透明的值

設置目標對象的 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' 復制代碼

這里設置 position:relative 是為了讓 box-shadow 陰影不被父容器所擋住. 如果沒有設置, box-shadow 會顯示不全

優缺點

優點: 實現方式簡單易懂

缺點: box-shadow 是個比較耗性能的屬性, 而且依靠 position:relative 不知道會不會出現無法覆蓋的問題

實現三 利用 html2canvas 將目標內容繪制的一個底色半透明的 canvas 里面

具體步驟:

用 getBoundingClientRect 獲取目標內容的顯示位置

用 html2canvas 將目標內容繪制到上一步獲取的指定位置和大小

核心代碼:

let target = document.querySelector('.mid-center') let pos = target.getBoundingClientRect() let w = ~~pos.width let h = ~~pos.heightlet 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 要手動設置,否則默認是 300 * 150,這樣如果在樣式里設置寬高的話,會導致畫布被拉伸.

優缺點

優點: 性能應該相對會比較好一點(如果html2canvas性能內有太差的話), 用 canvas 實現, 也比較不容易碰到各種層級遮擋或顯示不全的問題.

缺點: 實現方式相對繁瑣一點,而且需要借助外部工具

實現四 把其他元素都設成半透明的.然后給 body 加一個黑色的底色

具體步驟:

給整個文檔最外層的元素,設置一個黑色的底色

遍歷整個文檔,把非目標內容,和非目標內容的父容器,都設成半透明的

核心代碼:

function showGuidance() {let main = document.querySelector('.main')main.className += ' darkBackGround'setOpticity(main) }function setOpticity (element) {let doms = Array.from(element.children) || []let hasMatched = falsefor (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 } 復制代碼

如果不小心把目標元素的父元素也設置成半透明的,那么就算目標元素沒有設置半透明,也會變透明,因為父元素里面的所有內容,都會透明

優缺點

優點: 感覺沒有優點哈

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

最后

以上所有實現方式,均按最簡單的實現方式來,未考慮一些特殊情況(如:resize, 有動畫等) 附上 源碼

總結

以上是生活随笔為你收集整理的新手引导动画的4种实现方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。