首页 > 资讯 > 前端开发 > JavaScript >基于JavaScript简单实现一下新手引导效果

296

分享到

基于JavaScript简单实现一下新手引导效果

JavaScript实现新手引导效果 JavaScript实现新手引导 JavaScript新手引导 2023-03-07 11:03:25 296人浏览薄情痞子

摘要

目录一、实现效果二、实现1、用法2、html3、js三、总结与思考一、实现效果二、实现实现其实很简单，mask蒙版就是平铺一个整屏的 div，设置背景颜色为透明 transpa

一、实现效果

二、实现

实现其实很简单，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

<!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','何事秋风悲画扇'),
    new MaskIntroduceItem('five','等闲却变故人心'),
    new MaskIntroduceItem('six','骊山语罢清宵半'),
    new MaskIntroduceItem('four','却道故人心易变'),
    new MaskIntroduceItem('finally','谢谢大家支持！')
])
maskIntroduceManage.benginIntroduce()
</script>
</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}
    }
}

三、总结与思考

实现原理特别简单，没有太多复杂的逻辑在里面，想通过当前“需要介绍”的标签的 borderRadius 来设置镂空部分的倒角值，但是背景颜色是透明的，因此设置了，可以生效但也没有效果。

到此这篇关于基于javascript简单实现一下新手引导效果的文章就介绍到这了,更多相关JavaScript实现新手引导内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: 基于JavaScript简单实现一下新手引导效果

本文链接: https://lsjlt.com/news/198807.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

回答

如何调试操作系统的错误？
操作系统

2023-11-15发布

回答

操作系统中的I/O系统是如何实现的？
操作系统

2023-11-15发布

回答

如何实现操作系统的内存管理？
操作系统

2023-11-15发布

回答

什么是虚拟内存，它对操作系统有什么影响？
操作系统

2023-11-15发布

回答

ASP中的MVC架构和WebForms架构有什么区别和使用场景？
ASP.NET

2023-11-15发布

回答

ASP中的数据验证和数据校验有什么不同？
ASP.NET

2023-11-15发布

回答

ASP中的ADO对象和DAO对象有什么区别和使用方法？
ASP.NET

2023-11-15发布

回答

Node.js中的包管理器NPM是什么？如何使用它进行依赖管理？
node.js

2023-11-15发布

回答

Vue.js中的动态组件是什么？如何使用它来动态渲染组件？
VUE

2023-11-15发布

回答

如何使用Vue.js实现懒加载和预加载？
VUE

2023-11-15发布

基于JavaScript简单实现一下新手引导效果

目录

一、实现效果

二、实现

1、用法

2、HTML

3、JS

三、总结与思考

基于JavaScript简单实现一下新手引导效果

基于JavaScript如何实现新手引导效果

javascript实现简单下拉菜单效果

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

基于jquery实现简单轮播图效果

基于WPF实现简单放大镜效果

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

JavaScript实现简单拖拽效果

JavaScript实现拖拽简单效果

基于jquery怎么实现简单轮播图效果

JavaScript模拟实现新浪下拉菜单效果

Android 新手引导蒙层效果实现代码示例

jquery实现简单下拉菜单效果

javascript实现简单倒计时效果

javascript实现简单放大镜效果

JavaScript实现简单的拖拽效果

基于React.js实现简单的文字跑马灯效果

js实现简单手风琴效果

基于jquery实现手风琴效果

JavaScript代码实现简单日历效果

京东一面：post为什么会发送两次请求？???

鼠标划过时整行变色284607详解

鼠标划过时整行变色284415处理办法

TypeScript接口和类型的区别小结

写给小白学习的地理信息的表示法GeoJSON

vue使用Swiper踩坑解决避坑

JavaScrip简单数据类型隐式转换的实现

细说JS数组遍历的一些细节及实现

初学者如何快速搭建Express开发系统步骤详解

深入浅出JavaScript前端中的设计模式