纯CSS实现新手帮助提示功能(首次登入提示)

 
 
 
 

  
  
  
  
 
  
  
  
  
    × 
  
  
  
  
     
  
  
  
  
         
  
  
  
  
        
 
  
  
  
  
            ①注册登录 
  
  
  
  
            
点这里，点这里，点这里
 
  
  
  
  
            下一步 
  
  
  
  
        
 
  
  
  
  
    

重点看下每一步的html代码结构

 
 
 
 

  
  
  
  
 
  
  
  
  
     
  
  
  
  
    
 
  
  
  
  
        ①注册登录 
  
  
  
  
        
点这里，点这里，点这里
 
  
  
  
  
        下一步 
  
  
  
  
    
 
  
  
  
  
 
 
 
 
 

如果要新增加一步，就把这段复制，然后把其中修改其中的内容即可，但要确保step参数的顺序必须是正序，然后id的后缀值也是要正序，与step一样，剩下就是修改窗口top、left的布局以及箭头的top、left布局。

还有一点，箭头可以设置方向，样式分别为：jt_top、jt_bottom、jt_left、jt_right。

介绍就这么多了，剩下的就是css和js代码，我就不多说了，大家自己看吧

 
 
 
 

  
  
  
  
*{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实现新手帮助提示功能(首次登入提示)
URL地址：http://www.shufengxianlan.com/qtweb/news17/440317.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联