/** * Created by lc on 2014/10/14. */...-慕课网

                        课程
                    
                        /前端开发
                        
                            /jQuery
                        
                        /如何实现“新手引导”效果

/**
* Created by lc on 2014/10/14.
*/

window.onload=function(){
    var oMask=document.getElementById('mask');
    var oSearch=document.getElementById('searchTip');
    var oStep=oSearch.getElementsByTagName('div');
    var oA=oSearch.getElementsByTagName('a');
    var oClose=oSearch.getElementsByTagName('span');

//mask 父框第一个单元显示出来
oMask.style.display=oSearch.style.display=oStep[0].style.display='block';

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

//请教做到这一步的时候。只关闭第一个单元，之后的单元打不开。浏览器都试了都不行，代码查了即便不知道什么原因。。

chrome 审查提示Uncaught ReferenceError: aStep is not defined。

求解答，谢谢了

LeoLiu_0001

2014-10-14

源自：如何实现“新手引导”效果 5-1

关注问题我要回答

935

操作

收起

2 回答

万般浮云
2018-09-19

<!DOCTYPE html>

<html>

<head>

<title>无标题文档</title>

<style>

*{ margin:0; padding:0}

html{ height:100%}

body{ background:url(http://img1.sycdn.imooc.com//538d971400016dbd16191694.jpg) center top; height:100%}

#mask{ height:100%; width:100%; background:#000; opacity:0.5; filter:alpha(opacity=50); position:absolute; left:0; top:0;display:none;}

#searchTip{ width:980px; height:800px; position:absolute; left:50%; margin-left:-490px;}

#searchTip div{ position:absolute; display:none }

#searchTip div a{ position:absolute;width:96px; height:32px; cursor:pointer;text-indent:-999px; overflow:hidden}

#searchTip div span{cursor:pointer; position:absolute; width:30px; height:30px;text-indent:-999px; overflow:hidden}

.stepA{ background:url(http://img1.sycdn.imooc.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://img1.sycdn.imooc.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://img1.sycdn.imooc.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://img1.sycdn.imooc.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://img1.sycdn.imooc.com//538d97b70001f47d03970342.jpg); width:397px; height:342px;top:79px; left:250px}

.stepE a{top:245px; left:153px;}

</style>

window.onload=function(){

var oMask=document.getElementById('mask');

var oSearch=document.getElementById('searchTip');

var oStep=oSearch.getElementsByTagName('div');

var oA=oSearch.getElementsByTagName('a');

var oClose=oSearch.getElementsByTagName('span');

//mask 父框第一个单元显示出来

oMask.style.display=oSearch.style.display=oStep[0].style.display='block';

//下一步按钮

for(var i=0;i<oStep.length;i++){

oA[i].index=i;//为每一个按钮怎加一个index的属性，为后面的引用

oA[i].onclick=function(){

this.parentNode.style.display="none";

if(this.index < oStep.length-1) {

oStep[this.index+1].style.display="block";

} else if(this.index == oStep.length-1) {

oMask.style.display=oSearch.style.display="none";

}

//关闭按钮

for(var i=0;i<oClose.length;i++){

oClose[i].onclick=function() {

oMask.style.display=oSearch.style.display="none";

}

</script>

</head>

<body>

</div>

</body>

</html>

0 回复有任何疑惑可以回复我~

收起回答

素素陈
2015-10-09

var oStep=oSearch.getElementsByTagName('div');你这里定义的是“oStep”不是“aStep”

1 回复有任何疑惑可以回复我~

收起回答

0/150

提交

取消

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

参与学习 46296 人
解答问题 184 个

学会用原生JavaScript代码和JQuery两种方式实现依次显示效果

进入课程

我要回答关注问题

热搜

最近搜索清空

2 回答