整體效果展示

這類新手提示的插件還真是少，無(wú)奈之下自己寫(xiě)了一個(gè)，不帶任何圖片，完全css實(shí)現(xiàn)。因?yàn)榭紤]到功能比較特殊，使用不會(huì)太頻繁，就沒(méi)寫(xiě)成插件的模式，所有都是寫(xiě)死的，可以看下HTML代碼結(jié)構(gòu)：

<div class="help"> 
    <a href="###" class="close" title="關(guān)閉新手幫助">×</a> 
    <div id="step1" class="step" step="1" style="top:60px;left:320px;width:250px"> 
        <b class="jt jt_top" style="left:40px;top:-40px"></b> 
        <p> 
            <span class="h1">①</span><span class="h2">注冊(cè)登錄</span> 
            <br>點(diǎn)這里，點(diǎn)這里，點(diǎn)這里<br> 
            <a href="###" class="next">下一步</a> 
        </p> 
    </div> 
    <div id="step2" class="step" step="2" style="top:200px;left:400px;width:250px"> 
        <b class="jt jt_left" style="top:20px;left:-40px"></b> 
        <p> 
            <span class="h1">②</span><span class="h2">商品分類</span> 
            <br>看到了么？看到了么？看到了么？<br> 
            <a href="###" class="next">下一步</a> 
        </p> 
    </div> 
    <div id="step3" class="step" step="3" style="top:200px;left:500px;width:250px"> 
        <b class="jt jt_top" style="top:-40px;left:40px"></b> 
        <p> 
            <span class="h1">③</span><span class="h2">搜索框</span> 
            <br>這個(gè)就不用我介紹了吧 =)<br> 
            <a href="###" class="over"> 完 成 </a> 
        </p> 
    </div> 
</div> 

重點(diǎn)看下每一步的html代碼結(jié)構(gòu)

<div id="step1" class="step" step="1" style="top:60px;left:320px;width:250px"> 
    <b class="jt jt_top" style="left:40px;top:-40px"></b> 
    <p> 
        <span class="h1">①</span><span class="h2">注冊(cè)登錄</span> 
        <br>點(diǎn)這里，點(diǎn)這里，點(diǎn)這里<br> 
        <a href="###" class="next">下一步</a> 
    </p> 
</div> 

如果要新增加一步，就把這段復(fù)制，然后把其中修改其中的內(nèi)容即可，但要確保step參數(shù)的順序必須是正序，然后id的后綴值也是要正序，與step一樣，剩下就是修改窗口top、left的布局以及箭頭的top、left布局。

還有一點(diǎn)，箭頭可以設(shè)置方向，樣式分別為：jt_top、jt_bottom、jt_left、jt_right。

介紹就這么多了，剩下的就是css和js代碼，我就不多說(shuō)了，大家自己看吧

*{margin:0;padding:0}  
form,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,p{list-style:none outside none}  
a{text-decoration:none;color:#ccc;outline:none}  
a:hover{text-decoration:none}  
a img{border:none}  
.fr{float:right}  
.fl{float:left}  
.disn{display:none}  
   
html{height:100%;overflow:hidden;-moz-user-select:none;-khtml-user-select:none;user-select:none}  
body{font:12px/1.8 \5FAE\8F6F\96C5\9ED1,\5B8B\4F53;background:url(bg.png)}  
   
.help{position:absolute;z-index:5555;width:100%;height:100%;background:none rgba(0, 0, 0, 0.7);display:none}  
.help .close{float:right;font-size:40px;color:#fff;width:40px;height:40px;line-height:36px;text-align:center;background:none}  
.help .close:hover{background:none rgba(0, 0, 0, 0.7)}  
.help .step{position:absolute;color:#eee;padding:0 20px 15px;background:none rgba(0, 0, 0, 0.7);border-radius:5px;display:none}  
.help .step .jt{font-size:0;height:0;border:20px solid rgba(0, 0, 0, 0);position:absolute}  
.help .step .jt_left{border-right:20px solid rgba(0, 0, 0, 0.7)}  
.help .step .jt_right{border-left:20px solid rgba(0, 0, 0, 0.7)}  
.help .step .jt_top{border-bottom:20px solid rgba(0, 0, 0, 0.7)}  
.help .step .jt_bottom{border-top:20px solid rgba(0, 0, 0, 0.7)}  
.help .step .h1{font-size:40px;font-weight:bold}  
.help .step .h2{font-size:28px;font-weight:bold;padding-left:10px}  
.help .step .next,  
.help .step .over{border:1px solid #fff;color:#fff;padding:0 5px;float:right;margin-top:10px}  
.help .step .next:hover,  
.help .step .over:hover{background:none rgba(50, 50, 50, 0.7)} 

$(function(){  
    $('.help').show();  
    $('#step1').show();  
    $('.close').on('click',function(){  
        $('.step').hide();  
        $('.help').hide();  
    });  
    $('.next').on('click',function(){  
        var obj = $(this).parents('.step');  
        var step = obj.attr('step');  
        obj.hide();  
        $('#step'+(parseInt(step)+1)).show();  
    });  
    $('.over').on('click',function(){  
        $(this).parents('.step').hide();  
        $('.help').hide();  
    });  
}); 

下載地址：http://down.51cto.com/data/360552

原文鏈接：http://www.cnblogs.com/hooray/archive/2012/03/31/2426601.html

【編輯推薦】

1. 由布局學(xué)習(xí)CSS：從CSS sprites重視background
2. 淺談Web自動(dòng)化測(cè)試原理
3. 手機(jī)WEBKIT引擎HTML元素定位和事例
4. Node.js vs Opa: Web框架殺手
5. 設(shè)計(jì)好脾氣的Web頁(yè)面