引导提示功能

<!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>
posted @ 2016-11-03 17:28 汪洋是大大的海阅读(174) 评论(0) 收藏举报
刷新页面返回顶部
汪洋是大大的海

引导提示功能

公告
