<!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">
<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>
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 + ")");
//判断是否来过
if (res != "www.open.com.cn") {
alert("没有登录过");
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=" + oDate;
}
}
</script>
</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>
