如何实现“新手引导”效果

最新推荐文章于 2024-06-04 15:13:10 发布

lilly呀

最新推荐文章于 2024-06-04 15:13:10 发布

阅读量1.4w

点赞数 7

分类专栏： JS纪录篇 CSS布局文章标签：新手引导 css蒙版 cookie

JS纪录篇同时被 2 个专栏收录

48 篇文章 3 订阅

订阅专栏

CSS布局

13 篇文章 0 订阅

订阅专栏

前言：初次登录一些网站时，一般会有“新手指引”操作，用于指引新用户如何使用本网站的一些说明。在网上查阅资料，学习了《慕课网》的一个视频资料，现记录如下。“新手指引”操作，主要涉及html结构（黑色蒙版），css的绝对定位，js的“下一步”操作，以及用户登录时只操作一次的cookie设置。

一、HTML结构介绍

HTML结构布局，添加蒙版，定义父块及各个引导单元。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meat http-equiv="X-UA-Compatible" content="ie=edge">
<title>新手指引</title>
</head>
<body>
<!--黑色蒙版-->
<div id="mask"></div>
<!--引导区-->
<div id="searchTip">
     <div class="stepA"><a>下一步</a><span title="关闭">关闭</span></div>
     <div class="stepB"><a>下一步</a><span title="关闭">关闭</span></div>
     <div class="stepC"><a>下一步</a><span title="关闭">关闭</span></div>
     <div class="stepD"><a>下一步</a><span title="关闭">关闭</span></div>
     <div class="stepE"><a>下一步</a></div>
</div>
</body>
</html>

二、网页蒙版的设置

对网页蒙版的高度、位置、透明度及游览器的兼容情况进行设置。

#mask {
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.5;
    filter: alpha(opacity=50);  /*定义低版本IE游览器的透明属性*/
    position: absolute;
    left: 0;
    top: 0;
    display: none;
}

三、引导单元定位

对父块的宽度、位置、背景等参数进行设置，并且利用绝对定位的方法对各个引导小单元进行定位。

*{ 
    margin: 0; 
    padding: 0;
}
html{
    height:100%;
}
body{ 
    background:url(http://img.mukewang.com/538d971400016dbd16191694.jpg) center top; 
    height:100%;
}
#mask{ 
    height:100%; 
    width:100%; 
    background:#000; 
    opacity:0.5; 
    filter:alpha(opacity=50);  /*定义低版本IE游览器的透明属性*/ 
    position:absolute; 
    left:0; 
    top:0; 
    display:none;
}
#searchTip{ 
    width:980px; 
    height:800px; 
    position: absolute; 
    left:50%; 
    margin-left: -490px; /*让searchTip处于居中位置*/
    display:none;
}
#searchTip div{ 
    position:absolute; 
    display:none; 
}
#searchTip div a{ 
    position:absolute;
    width:96px; 
    height:32px; 
    cursor:pointer; 
    text-indent:-999px; /*隐藏a标签中的文字*/
    overflow:hidden;
}
#searchTip div span{
    cursor:pointer; 
    position:absolute; 
    width:30px; 
    height:30px;
    text-indent:-999px; 
    overflow:hidden;
}
.stepA{ 
    background:url(http://img.mukewang.com/538d974000011bda07450329.jpg);
    height:329px; 
    width:745px; 
    top:130px; 
    left:-9px; 
    display:block;
}
.stepA a{
    top:230px; 
    left:490px; 
}
.stepA span{ 
    top:143px; 
    right:32px; 
}
.stepB{ 
    background:url(http://img.mukewang.com/538d975f00017e8d06470405.jpg);
    width:647px; 
    height:405px;
    top:2px; 
    left:324px;
}
.stepB a{
    top:308px; 
    left:146px;
}
.stepB span{ 
    top:196px; 
    right:285px; 
}
.stepC{ 
    background:url(http://img.mukewang.com/538d977c0001ef5f06540257.jpg); 
    width:654px; 
    height:257px;
    top:294px; 
    left:318px;
}
.stepC a{
    top:155px; 
    left:400px; 
}
.stepC span{ 
    top:44px; 
    right:35px; 
}
.stepD{ 
    background:url(http://img.mukewang.com/538d97990001692305580348.jpg); 
    width:558px; 
    height:348px;
    top:78px; 
    left:155px;
}
.stepD a{
    top:246px; 
    left:304px;
}
.stepD span{ 
    top:135px; 
    right:35px; 
}
.stepE{ 
   background:url(http://img.mukewang.com/538d97b70001f47d03970342.jpg);
    width:397px; 
    height:342px;
    top:79px; 
    left:250px;
}
.stepE a{
    top:245px; 
    left:153px;
}

四、JavaScript控制引导单元的显示

首先对引导单元的逻辑顺序进行分析，通过编写JS，实现对各个引导单元的显示顺序进行控制。它们之间的逻辑关系如下图所示：

<script type="text/javascript">
window.onload = function(){
    var oMask = document.getElementById('mask');
    var oSearch = document.getElementById('searchTip');
    var aStep = oSearch.getElementsByTagName('div');
    var aA = oSearch.getElementsByTagName('a');
    var aClose = oSearch.getElementsByTagName('span');

        //下一步按钮
    for(var i=0;i<aStep.length;i++) {
        aA[i].index = i; //为每一个按钮增加一个index属性，为后面引用做好准备
        aA[i].onclick = function(){
            this.parentNode.style.display="none";
            //aStep[this.index+1].style.display="block";

            if(this.index<aStep.length-1){ //如上，如果不加这个判断，到了最后一个会报错
                aStep[this.index+1].style.display="block";
            }
            else if(this.index==aStep.length-1){//如果到了最后一个，结束整个操作
                oMask.style.display="none";
                this.style.display=oSearch.style.display="none";
            }
        }
    }
    //关闭按钮
    for(var i=0;i<aClose.length;i++){
        aClose[i].onclick=function(){
            oMask.style.display=oSearch.style.display="none";
        }
    }
}
</script>

还有另外一种交互实现方式--jQuery

对JavaScript源码实现的引导单元的显示效果，用jQuery进行简化。

<script src="js/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('#mask,#searchTip,#searchTip div:eq(0)').show();
        $('#searchTip div a').click(function(){
            var current=$(this).parent();
            current.hide();
            current.next().show();
        })

        $('#searchTip div span,#searchTip div a:last').click(function(){
            $('#mask,#searchTip').hide();
        })
    })
</script>

五、只为新手引导--Cookie的设定

介绍cookie的添加和读取。

cookie是一些数据，存储于你电脑上的文本文件中。当web服务器向游览器发送web页面时，在连接关闭后，服务端不会记录用户的信息。Cookie的作用就是用于解决“如何记录客户端的用户信息”：①当用户访问web页面时，它的名字可以记录在cookie中；②在用户下一次访问该页面，可以在cookie中读取用户访问记录。逻辑结构如下：

<script type="text/javascript">
window.onload = function(){
    var oMask = document.getElementById('mask');
    var oSearch = document.getElementById('searchTip');
    var aStep = oSearch.getElementsByTagName('div');
    var aA = oSearch.getElementsByTagName('a');
    var aClose = oSearch.getElementsByTagName('span');

    //读取cookie
    var res=document.cookie.substring(5);
    alert("当前cookies="+"("+res+")");
     
    如果没有cookie，执行以下操作
    //判断是否来过
    if(res!="www.open.com.cn"){
        alert("没有登录过");
        //mask父框 第一单元显示出来
        oMask.style.display = oSearch.style.display = aStep[0].style.display = 'block';

        //下一步按钮
    for(var i=0;i<aStep.length;i++) {
        aA[i].index = i; //为每一个按钮增加一个index属性，为后面引用做好准备
        aA[i].onclick = function(){
            this.parentNode.style.display="none";
            //aStep[this.index+1].style.display="block";

            if(this.index<aStep.length-1){ //如上，如果不加这个判断，到了最后一个会报错
                aStep[this.index+1].style.display="block";
            }
            else if(this.index==aStep.length-1){//如果到了最后一个，结束整个操作
                oMask.style.display="none";
                this.style.display=oSearch.style.display="none";
            }
        }
    }
    //关闭按钮
    for(var i=0;i<aClose.length;i++){
        aClose[i].onclick=function(){
            oMask.style.display=oSearch.style.display="none";
        }
    }
    //添加cookie
    var oDate=new Date();
    oDate.setDate(oDate.getDate()+30);
    document.cookie="name=www.open.com.cn;expires="
    //如果没有来过，添加cookie
    var oDate = new Date();
    oDate.setDate(oDate.getDate()+30);
    document.cookie="name=www.open.com.con;expires="+oDate;
    }
}
</script>

或者，用jQuery方法如下：

<script type="text/javascript">
    $(function(){
        //读取cookie
        var res=document.cookie.substring(5);
        alert(res);

        //如果没有cookie,执行以下动作
        if(res!="www.open.com.cn"){
            alert(res)
        $('#mask,#searchTip,#searchTip div:eq(0)').show();
        $('#searchTip div a').click(function(){
            var current=$(this).parent();
            current.hide();
            current.next().show();
        })

        $('#searchTip div span,#searchTip div a:last').click(function(){
            $('#mask,#searchTip').hide();
        })

        //添加cookie
        var oDate=new Date();
        oDate.setDate(oDate.getDate()+30);
        document.cookie="name=www.open.com.cn;expires="+oDate;
        }
    })
</script>

六、总结

“新手指引”效果，注意JS的设置，学习cookie的写法，在未连接服务器时，在本地测试时，可以使用火狐游览器进行模拟。

在游览器的显示效果如下：

参考博客：《慕课网》----如何实现“新手引导” 效果 https://www.imooc.com/video/140

lilly呀

关注

7
点赞
踩
56

收藏

觉得还不错? 一键收藏
0
评论
如何实现“新手引导”效果

前言：初次登录一些网站时，一般会有“新手指引”操作，用于指引新用户如何使用本网站的一些说明。在网上查阅资料，学习了《慕课网》的一个视频资料，现记录如下。“新手指引”操作，主要涉及html结构（黑色蒙版），css的绝对定位，js的“下一步”操作，以及用户登录时只操作一次的cookie设置。一、HTML结构介绍 HTML结构布局，添加蒙版，定义父块及各个引导单元。&lt;!DO...
复制链接

扫一扫

专栏目录