溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了基于JavaScript如何實(shí)現(xiàn)新手引導(dǎo)效果的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇基于JavaScript如何實(shí)現(xiàn)新手引導(dǎo)效果文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。
實(shí)現(xiàn)其實(shí)很簡(jiǎn)單，mask蒙版就是平鋪一個(gè)整屏的 div，設(shè)置背景顏色為透明 transparent ，然后，再設(shè)置 outline 為半透明及足夠?qū)捑涂梢粤?，再用同樣的方式?chuàng)建一個(gè) 箭頭 跟 警告 標(biāo)簽。
let maskIntroduceManage = new MaskIntroduceManage([
new MaskIntroduceItem('one','人生若只如初見'),
new MaskIntroduceItem('two','何事秋風(fēng)悲畫扇'),
new MaskIntroduceItem('five','等閑卻變故人心'),
new MaskIntroduceItem('six','驪山語(yǔ)罷清宵半'),
new MaskIntroduceItem('four','卻道故人心易變'),
new MaskIntroduceItem('finally','謝謝大家支持！')
])
maskIntroduceManage.benginIntroduce()<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.content {
padding: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
}
span {
width: 60px;
height: 60px;
line-height: 60px;
margin-left: 40px;
margin-top: 140px;
margin-bottom: 0px;
text-align: center;
display: block;
background-color: antiquewhite;
}
.finally {
width: 100px;
height: 100px;
background-color: cornsilk;
border-radius: 50%;
line-height: 100px;
text-align: center;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
}
span:nth-of-type(1){
margin-top: 30px;
}
span:nth-of-type(2){
margin-top: 70px;
}
span:nth-of-type(3){
margin-top: 160px;
}
span:nth-of-type(4){
margin-top: 160px;
}
span:nth-of-type(5){
margin-top: 70px;
}
span:nth-of-type(6){
margin-top: 30px;
}
</style>
<body>
<div class="content">
<span id="one">納</span>
<span id="two">蘭</span>
<span id="three">容</span>
<span id="four">若</span>
<span id="five">作</span>
<span id="six">詞</span>
</div>
<div class="finally" id="finally">
謝謝
</div>
</body>
<script src="./maskIntroduce.js"></script>
<script>
let maskIntroduceManage = new MaskIntroduceManage([
new MaskIntroduceItem('one','人生若只如初見'),
new MaskIntroduceItem('two','何事秋風(fēng)悲畫扇'),
new MaskIntroduceItem('five','等閑卻變故人心'),
new MaskIntroduceItem('six','驪山語(yǔ)罷清宵半'),
new MaskIntroduceItem('four','卻道故人心易變'),
new MaskIntroduceItem('finally','謝謝大家支持！')
])
maskIntroduceManage.benginIntroduce()
</script>
</html>// 單元信息model
class MaskIntroduceItem {
// 需要引導(dǎo)的dom的ID
id
// 需要引導(dǎo)的dom功能描述
warming
constructor(id,warming){
this.id = id
this.warming = warming
}
}
// 遮罩操作類
class MaskIntroduceManage {
// 消息展示類集合
maskIntroduceItems
// 遮罩層
el
// 遮罩層提示框
warmingEl
// 指引肩頭
guidanceEl
// 展示的第幾個(gè)
currentShowIndex = 0
// 記錄window事件
windowEvent = null
constructor(maskIntroduceItems){
this.maskIntroduceItems = maskIntroduceItems
}
// 添加消息展示類
addIntroduceItem(introduceItem){
this.maskIntroduceItems.push(introduceItem)
}
// body增加遮罩
addMaskToBody(){
//添加遮罩框
this.el = document.createElement('div')
this.el.style.cssText = 'position: fixed;background: transparent;outline:rgba(0, 0, 0, 0.5) 3500px solid;'
let body = document.getElementsByTagName('body')[0]
body.appendChild(this.el)
//添加提示框
this.warmingEl = document.createElement('div')
this.warmingEl.style.cssText = 'position:fixed;width:100px;background:white;border-radius: 10px;padding: 30px;font-size: 14px;'
body.appendChild(this.warmingEl)
//添加指引箭頭
this.guidanceEl = document.createElement('div')
this.guidanceEl.style.cssText = 'position:fixed;width: 14px; height: 13px; background-color: white;clip-path: polygon(50% 0,100% 100%,0 100%);'
body.appendChild(this.guidanceEl)
//設(shè)置body禁止?jié)L動(dòng)
body.style.overflow = 'hidden'
//保留window事件
if(window.onclick){
this.windowEvent = window.onclick
}
window.onclick = ()=>{
this.nextIntroduce()
}
}
// 開始引導(dǎo)
benginIntroduce(){
this.addMaskToBody()
this.nextIntroduce()
}
// 下一步
nextIntroduce(){
let maskIntroduceItem = this.maskIntroduceItems.length > 0 ? this.maskIntroduceItems[this.currentShowIndex] : null
if(!maskIntroduceItem){
return
}
let needIntroduceEl = document.getElementById(maskIntroduceItem.id)
//遮罩層的鏤空位置
this.el.style.width = needIntroduceEl.offsetWidth + 'px'
this.el.style.height = needIntroduceEl.offsetHeight + 'px'
this.el.style.top = this.getElementPosition(needIntroduceEl).top + 'px'
this.el.style.left = this.getElementPosition(needIntroduceEl).left + 'px'
//設(shè)置對(duì)應(yīng)倒角，但是由于背景顏色是透明的，所以，沒有效果（????????????）
//this.el.style.borderRadius = window.getComputedStyle(needIntroduceEl,null)['border-radius']
this.currentShowIndex ++
//指引箭頭位置
let guidanceElLeft = this.getElementPosition(needIntroduceEl).left + needIntroduceEl.offsetWidth / 2.0
this.guidanceEl.style.top = this.getElementPosition(needIntroduceEl).top + needIntroduceEl.offsetHeight + 20 + 'px'
this.guidanceEl.style.left = guidanceElLeft + 'px'
//提示框的位置
this.warmingEl.style.top = this.getElementPosition(this.guidanceEl).top + this.guidanceEl.offsetHeight - 4 + 'px'
let warmingElLeft = this.getElementPosition(needIntroduceEl).left - ((this.warmingEl.offsetWidth - needIntroduceEl.offsetWidth) / 2.0)
if(warmingElLeft < 0){
warmingElLeft = this.getElementPosition(needIntroduceEl).left + 10
}
if(warmingElLeft + this.warmingEl.offsetWidth > document.getElementsByTagName('body')[0].offsetWidth){
warmingElLeft = warmingElLeft - 10 - (this.warmingEl.offsetWidth - needIntroduceEl.offsetWidth) / 2.0
}
this.warmingEl.style.left = warmingElLeft + 'px'
this.warmingEl.innerHTML = maskIntroduceItem.warming
//最后一個(gè)展示完恢復(fù)window點(diǎn)擊事件
if(this.currentShowIndex >= this.maskIntroduceItems.length){
setTimeout(() => {
//移除當(dāng)前遮罩
this.el.remove()
//移除當(dāng)前提示框
this.warmingEl.remove()
//移除箭頭
this.guidanceEl.remove()
//設(shè)置body可以滾動(dòng)
document.getElementsByTagName('body')[0].style.overflow = 'auto'
//恢復(fù)window事件
if(this.windowEvent){
window.onclick = this.windowEvent
}
}, 2000);
}
}
// 獲取元素在屏幕的位置
getElementPosition(element){
var top = element.offsetTop
var left = element.offsetLeft
var currentParent = element.offsetParent;
while (currentParent !== null) {
top += currentParent.offsetTop
left += currentParent.offsetLeft
currentParent = currentParent.offsetParent
}
return {top,left}
}
}關(guān)于“基于JavaScript如何實(shí)現(xiàn)新手引導(dǎo)效果”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“基于JavaScript如何實(shí)現(xiàn)新手引導(dǎo)效果”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼