<!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>