新聞中心
這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
純CSS實(shí)現(xiàn)新手幫助提示功能(首次登入提示)
整體效果展示

這類新手提示的插件還真是少,無(wú)奈之下自己寫了一個(gè),不帶任何圖片,完全css實(shí)現(xiàn)。因?yàn)榭紤]到功能比較特殊,使用不會(huì)太頻繁,就沒寫成插件的模式,所有都是寫死的,可以看下HTML代碼結(jié)構(gòu):
重點(diǎn)看下每一步的html代碼結(jié)構(gòu)
如果要新增加一步,就把這段復(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
本文名稱:純CSS實(shí)現(xiàn)新手幫助提示功能(首次登入提示)
鏈接地址:http://fisionsoft.com.cn/article/dpiscde.html


咨詢
建站咨詢
