摘要:前言前一陣子忙著找工作面試過程中碰到一個感覺比較有意思的問題盡量多的列舉出新手引導(dǎo)動畫的實現(xiàn)方式昨天稍微總結(jié)了一下實現(xiàn)了種源碼在最后如果想直接看結(jié)果的可以拉到最后去看這里假設(shè)所有的彈出層都是基于頁面上原有的元素實現(xiàn)一復(fù)制目標內(nèi)容具體步驟用獲
前言
前一陣子忙著找工作,面試過程中,碰到一個感覺比較有意思的問題,盡量多的列舉出新手引導(dǎo)動畫的實現(xiàn)方式, 昨天稍微總結(jié)了一下, 實現(xiàn)了4種.源碼在最后,如果想直接看結(jié)果的,可以拉到最后去看.
這里假設(shè)所有的彈出層都是基于頁面上原有的元素實現(xiàn)一 復(fù)制目標內(nèi)容
具體步驟:
用 getBoundingClientRect 獲取目標內(nèi)容的顯示位置
復(fù)制一個目標內(nèi)容,并且設(shè)置相對定位, 定位的數(shù)據(jù)在上一步有獲取到,還要把 z-index 稍微設(shè)置高一點
在復(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)缺點
比較平凡的實現(xiàn)方式,普普通通的,沒啥特色.
具體步驟:
設(shè)置目標對象的 box-shadow 為一個比較大的,半透明的值
設(shè)置目標對象的 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 陰影不被父容器所擋住. 如果沒有設(shè)置, box-shadow 會顯示不全
優(yōu)缺點
優(yōu)點: 實現(xiàn)方式簡單易懂
缺點: box-shadow 是個比較耗性能的屬性, 而且依靠 position:relative 不知道會不會出現(xiàn)無法覆蓋的問題
實現(xiàn)三 利用 html2canvas 將目標內(nèi)容繪制的一個底色半透明的 canvas 里面具體步驟:
用 getBoundingClientRect 獲取目標內(nèi)容的顯示位置
用 html2canvas 將目標內(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 要手動設(shè)置,否則默認是 300 * 150,這樣如果在樣式里設(shè)置寬高的話,會導(dǎo)致畫布被拉伸.
優(yōu)缺點
優(yōu)點: 性能應(yīng)該相對會比較好一點(如果html2canvas性能內(nèi)有太差的話), 用 canvas 實現(xiàn), 也比較不容易碰到各種層級遮擋或顯示不全的問題.
缺點: 實現(xiàn)方式相對繁瑣一點,而且需要借助外部工具
實現(xiàn)四 把其他元素都設(shè)成半透明的.然后給 body 加一個黑色的底色具體步驟:
給整個文檔最外層的元素,設(shè)置一個黑色的底色
遍歷整個文檔,把非目標內(nèi)容,和非目標內(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 }
如果不小心把目標元素的父元素也設(shè)置成半透明的,那么就算目標元素沒有設(shè)置半透明,也會變透明,因為父元素里面的所有內(nèi)容,都會透明
優(yōu)缺點
優(yōu)點: 感覺沒有優(yōu)點哈
缺點: 批量操作 dom, dom 元素多的情況下,性能極差
最后以上所有實現(xiàn)方式,均按最簡單的實現(xiàn)方式來,未考慮一些特殊情況(如:resize, 有動畫等)
附上 源碼
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/117087.html
摘要:前言前一陣子忙著找工作面試過程中碰到一個感覺比較有意思的問題盡量多的列舉出新手引導(dǎo)動畫的實現(xiàn)方式昨天稍微總結(jié)了一下實現(xiàn)了種源碼在最后如果想直接看結(jié)果的可以拉到最后去看這里假設(shè)所有的彈出層都是基于頁面上原有的元素實現(xiàn)一復(fù)制目標內(nèi)容具體步驟用獲 前言 前一陣子忙著找工作,面試過程中,碰到一個感覺比較有意思的問題,盡量多的列舉出新手引導(dǎo)動畫的實現(xiàn)方式, 昨天稍微總結(jié)了一下, 實現(xiàn)了4種.源碼...
摘要:前言最近看了一些文章,知道了實現(xiàn)引導(dǎo)動畫的基本原理,所以決定來自己親手做一個通用的引導(dǎo)動畫類。對上述情況的調(diào)節(jié)代碼如下若引導(dǎo)的元素不在頁面范圍內(nèi),則滾動頁面到引導(dǎo)元素的視野范圍內(nèi)接下來,我們就來一起實現(xiàn)下這個引導(dǎo)動畫類。 前言 最近看了一些文章,知道了實現(xiàn)引導(dǎo)動畫的基本原理,所以決定來自己親手做一個通用的引導(dǎo)動畫類。 我們先來看一下具體的效果:點這里 原理 通過維護一個Modal實例...
閱讀 2576·2021-10-25 09:45
閱讀 1238·2021-10-14 09:43
閱讀 2297·2021-09-22 15:23
閱讀 1519·2021-09-22 14:58
閱讀 1934·2019-08-30 15:54
閱讀 3539·2019-08-30 13:00
閱讀 1354·2019-08-29 18:44
閱讀 1571·2019-08-29 16:59