js如何实现新手引导效果?

更新日期: 2018-04-25阅读量: 6081标签: 效果

js最近有个小伙伴问到了怎么实现新手引导的效果,然后便去网上找了下实现方案。可以通过css的border来实现。效果图如下:


具体代码如下:  

<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>css实现用户引导</title>
    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        #first-step {
            height: 100px;
            width: 300px;
            border: 1px solid black;
            border-radius: 4px;
            line-height: 100px;
            text-align: center;
            position: absolute;
            top: 50px;
            left: 200px;
        }

        #second-step {
            height: 100px;
            width: 300px;
            border: 1px solid black;
            border-radius: 4px;
            line-height: 100px;
            text-align: center;
            position: absolute;
            top: 50px;
            left: 800px;
        }

        #third-step {
            height: 100px;
            width: 300px;
            border: 1px solid black;
            border-radius: 4px;
            line-height: 100px;
            text-align: center;
            position: absolute;
            top: 500px;
            left: 200px;
        }

        .mask-tip {
            min-width: 175px;
            text-align: center;
            border: 1px solid rgb(0, 94, 166);
            border-radius: 4px;
            padding: 5px 10px;
            position: absolute;
            top: 120px;
            left: 65px;
            background: white;
        }

        .mask-tip:before {
            content: "";
            width: 10px;
            height: 10px;
            border: 1px solid rgb(0, 94, 166);
            background: white;
            position: absolute;
            transform: rotate(45deg);
            top: -6px;
            left: 85px;
            border-right-width: 0;
            border-bottom-width: 0;
        }

        .mask-tip-desc {
            display: block;
            margin-bottom: 10px;            
        }

        .mask-tip-btn {
            border-radius: 4px;
            padding: 6px;
            border: none;
            background-color: rgb(0, 94, 166);
            cursor: pointer;
            color: white;
        }
    </style>
</head>
<body>
    <div id="first-step">第一步</div>

    <div id="second-step">第二步</div>

    <div id="third-step">第三步</div>

    <div id="mask">
        <div class="mask-tip">
            <span id="mask-desc" class="mask-tip-desc"></span>
            <button id="mask-next" class="mask-tip-btn">下一步</button>
        </div>
    </div>
</body>
<script type="text/JavaScript">
    function getElementById(id) {
        return document.getElementById(id);
    };

    function mask(params) {
        var mask = getElementById('mask');

        if (params.length === 0) {
            mask.style.display = 'none';
            return;
        }

        var {id, desc} = params[0];

        /****************   获取要cover的元素基本信息   ****************/
        var ele = getElementById(id);
        var offsetWidth = ele.offsetWidth;
        var offsetHeight = ele.offsetHeight;
        var offsetLeft = ele.offsetLeft;
        var offsetTop = ele.offsetTop;

        console.log(offsetWidth, offsetHeight, offsetLeft, offsetTop);

        /****************   获取屏幕大小,包含滚动区域   ****************/
        var scrollWidth = document.body.scrollWidth;
        var scrollHeight = document.body.scrollHeight;

        console.log(scrollWidth, scrollHeight);

        /****************   为Mask设置css   ****************/        
        mask.style.width = scrollWidth + 'px';
        mask.style.height = scrollHeight + 'px';
        mask.style.borderColor = "rgba(0, 0, 0, 0.75)";
        mask.style.borderStyle = 'solid';
        mask.style.borderLeftWidth = offsetLeft - 5 + 'px';
        mask.style.borderRightWidth = (scrollWidth - offsetWidth - offsetLeft - 5) + 'px';
        mask.style.borderTopWidth = offsetTop - 5 + 'px';
        mask.style.borderBottomWidth = (scrollHeight - offsetHeight - offsetTop - 5) + 'px';
        mask.style.position = 'absolute';
        mask.style.left = 0;
        mask.style.top = 0;

        /****************   为Mask设置desc   ****************/        
        var maskDesc = getElementById('mask-desc');
        maskDesc.innerHTML = desc;

        /****************   绑定next事件   ****************/
        var nextBtn = getElementById('mask-next');
        (function(mask) {
            nextBtn.onclick = function() {
                params.shift();
                mask(params);
            };    
        })(arguments.callee);
    };

    mask([
        {
            id: 'first-step',
            desc: '我是第一步的说明'
        },
        {
            id: 'second-step',
            desc: '我是第二步的说明'
        },
        {
            id: 'third-step',
            desc: '我是第三步的说明'
        }
    ]);
</script>
</html>


来源:https://blog.csdn.net/oliver940910/article/details/75451847

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/710

用CSS新属性实现特殊的图片显示效果

使用一个或多个图像相关的CSS属性(background-blend-mode, mix-blend-mode, or filter)可以实现许多特殊的图片显示效果。本文转载自Bennett Feely的个人网站,文中共列举了20种图片显示效果。

position: sticky实现导航栏下滑吸顶效果

近期开发中遇到导航栏下滑吸顶的需求,经过方案调研,发现position:sticky可以简单快捷的实现功能。sticky(粘贴定位)可以被认为是相对定位和固定定位的混合,元素在跨越特定阀值前为相对定位

CSS实现DIV从隐藏到展示的过渡效果

CSS中有很多功能强大的方法,其中过渡属性transition就很牛叉。你不用写一行JavaScript代码,随便写点css就可以实现一个动画效果。下面结合我在W3C网站上看到的实例,举个栗子说明下

CSS如何在页面加载时创建淡入效果?

想要使用CSS在页面加载上创建淡入效果,可以使用css的animation属性或transition属性在页面加载时创建淡入效果。下面就来通过示例来介绍一下。通过2个关键帧来定义CSS动画:一个不透明度设置为0,另一个不透明度设置为1。

纯css实现气泡效果

主要运用的是1.border 组成的直角三角形。2,before 和 after 伪元素 。3,z-index属性;将元素的长宽设置为0,并且将border的3条边设置为透明的,就会出现border颜色的直角三角形

Vue.js实现tab切换效果

在我们平时浏览网站的时候,经常看到的特效有图片轮播、导航子菜单的隐藏、tab标签的切换等等。这段时间学习了vue后,开始要写出一些简单的特效。实现思路是点击上方的标题,下方的内容随之发生改变

用纯css模拟下雪的效果

下雪效果只是一类效果的名称,可以是红包雨等一些自由落体的运动效果,本文就是用纯css模拟下雪的效果,更多效果大家可以自行发挥。

纯css实现星级评分效果

纯css实现超酷炫的星级评分动画效果,实现思路:5个类型为radio的input,label标签修改样式背景图为星星,label标签给每个星星鼠标停留时加注名字,点击星星有放大旋转的动画

多种方式实现吸顶效果

还是前两天的那个唱歌中间页,上线前发现滚动时候体验不好。因为之前没有做吸顶效果,搜索内容然后滚下去,没有找到内容需要再手动划上来。

web页面实现镂空遮盖层效果

可以看到除了中间框选的部分,其他区域被一层半透明层覆盖(backdrop),这种效果不知道专业叫法,这里称呼它“镂空遮盖层”。实际业务需求中倒是不多见,比较常见的是“页面上的新手引导”,“视频网站的关灯模式”等用到这种效果

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!