新手指引案例（js+css+cookie）

css部分：
.newtips{
    z-index:100;
    position: absolute;
    width:100%;
    height:100%;
    display: none;
}
.newtips .ts-cover{
    position:fixed;
    top:0;
    left:0;
    height: 1000px;
    background: rgba(0,0,0,.8);
}
.newtips .ts-con{
    width:100%;
    height:100%;
}
.newtips .ts-con > div{
    position: absolute;
    cursor:pointer;
    display:none;
    font-size:30px;
    line-height:1.6em;
    font-weight:bolder;
}
.newtips .ts-con .one{
    top: 310px;
    left: 415px;
    display:block;
}
.newtips .ts-con .two{
    top: 125px;
    right: 225px;
}
.newtips .ts-con .three{
    top: 175px;
    right: -20px;
}
.newtips .ts-con .fore{
    top: 580px;
    right: -40px;
}
.newtips .ts-con .five{
    color: #fff;
    top: 580px;
    left: calc(50% - 100px);
    text-align: center;
}
.newtips .five label{
   font-size: 14px;
   cursor: pointer;
}
.newtips .five input{
    width: 1.2em;
    height: 0.6em;
    vertical-align: middle;
}
html部分:
<div class="newtips hidden-xs">
    <div class="ts-cover">
    </div>
    <div class="ts-con">
        <div class="one">
                <img src="/images/tips/xuanzetip.png" alt="" >
                
        </div>
        <div class="two">
                <img src="/images/tips/yjjsTip.png" alt="" >
            
        </div>
         <div class="three">
                <img src="/images/tips/baogaotip.png" alt="" >
        </div>
        <div class="five">
            <p><img src="/images/tips/know.png" alt="" ></p>
            <label for="istips">以后不显示此提醒</label><input id="istips" type="checkbox" name="istips">
        </div>
    </div> 
</div>


js部分：
$(function () {
    var oIstips = document.getElementById('istips');
    if (getCookie('tips') === "" && $('.newtips').length === 1) {
        $('.newtips').css('display', 'block');
        var $Height = $(window).height() / 2;
        $('.newtips .ts-cover').width($(window).width());
        $('html,body').animate({ scrollTop: 400 }, 500);
        $('.newtips .ts-con > div').each(function () {
            $(this).click(function () {
                var $next = $(this).next();
                if ($next.length === 1) {
                    $(this).hide(500, function () {
                        $next.show();
                        $('html,body').animate({ scrollTop: $next.offset().top - $Height }, 500);
                    });
                } 
            });
        });
        $('.newtips .ts-con > div').eq(-1).find('p').eq(0).click(function (e) {
            if (oIstips.checked) {
                setCookie({
                    tips: 'no'
                }, 60);
            } else {
                setCookie({
                    tips: 'yes'
                }, 1);
            }
            $('.newtips').hide(500);
        });
    }
});
//设置cookie
function setCookie(vJson , time){
    var data = new Date( new Date().getTime() + time*24*60*60*1000 ).toGMTString();
    for (var key in vJson)document.cookie = key+"="+vJson[key]+"; expires="+data;
}


//获取cookie
function getCookie(key){
    var arr = document.cookie.match(new RegExp("(\\s|^)"+key+"=([^;]*)(;|$)"));
    return arr?arr[2]:"";
}


//移出cookie
function removeCookie(key){
    var json = {};
    json[key] = "";
    setCookie(json , -1);
}