JS+CSS如何快速实现新手引导效果

今天小编给大家分享一下JS+CSS如何快速实现新手引导效果的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

创新互联建站基于分布式IDC数据中心构建的平台为众多户提供达州服务器托管 四川大带宽租用 成都机柜租用 成都服务器租用。

一、实现效果

二、实现

实现其实很简单，mask蒙版就是平铺一个整屏的 div，设置背景颜色为透明 transparent，然后，再设置 outline为半透明及足够宽就可以了，再用同样的方式创建一个 箭头跟 警告标签。

1、用法

let maskIntroduceManage = new MaskIntroduceManage([
   new MaskIntroduceItem('one','人生若只如初见'),
   new MaskIntroduceItem('two','何事秋风悲画扇'),
   new MaskIntroduceItem('five','等闲却变故人心'),
   new MaskIntroduceItem('six','骊山语罢清宵半'),
   new MaskIntroduceItem('four','却道故人心易变'),
   new MaskIntroduceItem('finally','谢谢大家支持！')
])
maskIntroduceManage.benginIntroduce()

2、HTML

   纳
   兰
   容
   若
   作
   词


   谢谢

3、JS

// 单元信息model
class MaskIntroduceItem {
   // 需要引导的dom的ID
   id
   // 需要引导的dom功能描述
   warming
   constructor(id,warming){
       this.id = id
       this.warming = warming
   }
}

// 遮罩操作类
class MaskIntroduceManage {
   // 消息展示类集合
   maskIntroduceItems
   // 遮罩层
   el
   // 遮罩层提示框
   warmingEl
   // 指引肩头
   guidanceEl
   // 展示的第几个
   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)
       //设置body禁止滚动
       body.style.overflow = 'hidden'
       //保留window事件
       if(window.onclick){
           this.windowEvent = window.onclick
       }
       window.onclick = ()=>{
           this.nextIntroduce()
       }
   }

   // 开始引导
   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'
       //设置对应倒角，但是由于背景颜色是透明的，所以，没有效果（???）
       //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
       //最后一个展示完恢复window点击事件
       if(this.currentShowIndex >= this.maskIntroduceItems.length){
           setTimeout(() => {
               //移除当前遮罩
               this.el.remove()
               //移除当前提示框
               this.warmingEl.remove()
               //移除箭头
               this.guidanceEl.remove()
               //设置body可以滚动
               document.getElementsByTagName('body')[0].style.overflow = 'auto'
               //恢复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}
   }
}

以上就是“JS+CSS如何快速实现新手引导效果”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。