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

时间: 2018-04-25阅读: 5513标签: 效果

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

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

使用原生JS实现图片放大镜效果

前提先了解数学算法:求遮罩层mask宽度,大图、大图显示区、小图、遮罩层;小图是大图等比缩放的,遮罩层是大图显示区缩放的,小图/大图 = 遮罩层/大图显示区,遮罩层 = 大图显示区*(小图/大图);

Vue 中多个元素、组件的过渡,及列表过渡

多元素之间如何实现过渡动画效果呢?这么写行不行呢?肯定是不行的,因为 Vue 在两个元素进行切换的时候,会尽量复用dom,就是因为这个原因,导致现在动画效果不会出现。如果不让 Vue 复用dom的话,应该怎么做呢?只需要给这两个div不同的key值就行了

遮罩层镂空效果的多种实现方法

原理:先截一张相同位置的图片,创建一个遮罩层,然后把图片定位在相应的位置上。优点:原理简单;兼容性好,可以兼容到IE6、IE7;可以同时实现镂空多个。

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

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

canvas实现刮刮卡效果

最近手机应用和网页都有很多类似刮刮卡抽奖效果,所以我花了点时间来写这个特效,单页面实现刮刮卡效果

CSS实现抖音彩色文字抖动效果

先来无事谢了一个抖音文字都懂效果(比较晃眼),效果非常简单,就是一个 CSS3 的动画效果。直接将这下面代码,放到你的 CSS 文件:

CSS遮罩效果(模糊效果,阴影效果,毛玻璃效果)

一般遮罩加上透明度opacity就是阴影效果。阴影效果和一般遮罩一样,唯一不同的是设置.mask遮罩的背景色用rgba()表示,当然hsla()也是可以的。模糊效果(毛玻璃效果) 通过 filter来实现

如何用 CSS Animations 实现滑动图片展现文字的效果

在这篇文章中,我希望能带领大家了解一下 CSS animation property ,以及详细地解释我的个人网站 中的一个效果:让文字在移动的物体后出现。如果你想要看最后的成果,这里有一个例子 。

用Javascript制作随机星星效果图

在浏览一些图片网站的时候,经常会看到很多的漂亮的星空图,比如,下面的图片。其实这种星星图片的效果,也可以通过html+css样式和js的方式来实现。今天教大家如何实现星星图的效果。

炫酷的播放粒子效果,你也可以学会!使用Web动画API制作

当谈到运动和动画时,可能没有什么比粒子更让我喜欢了,这就是为什么每次我探索新技术时,我总是以尽可能多的创建粒子来演示。在本文中,单击按钮时,我们将使用Web Animations API创建烟花效果

点击更多...

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