新手引导页，实现效果。https://www.imooc.com/video/167-CSDN博客

本文链接：https://blog.csdn.net/xqiitan/article/details/88823234

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ 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); position:absolute; left:0; top:0; display:none}
#searchTip{ width:980px; height:800px; position:absolute; left:50%; margin-left:-490px; display:none}
#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://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;}
</style>
<script>

蒙层定位处理：
先向右偏移50%，然后向左margin内容区域(800px)的一半(400px)。
position:absolute; left:50%; margin-left:-400px;

【下一步】【关闭】让文本不显示：让他溢出，隐藏。
text-indent:-999px; overflow:hidden;
cursor:pointer; //鼠标经过，显示手指，表示可以点击。
定位到准确的位置：
之后的top，left坐标偏移值，通过样式查看，实时修改，直到覆盖原来图片上的按钮。

//--------------------
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');

// 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].οnclick=function(){
       this.parentNode.style.display="none"; // 父块隐藏
       if(this.index <aStep.length-1) {
           aStep[this.index+1].style.display ="block"; // 下一个层显示
       } else if(this.index == aStep.length-1){
           oMask.style.display = oSearch.style.display="none"; // 都隐藏起来
       }
   }
}
// 关闭按钮，引导层都消失。
for(var i=0; i<aClose.length; i++) {
   aClose[i].οnclick=function(){
       oMask.style.display = oSearch.style.display="none"; // 都隐藏起来
   }
}