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

开发 前端
这类新手提示的插件还真是少,无奈之下自己写了一个,不带任何图片,完全css实现。因为考虑到功能比较特殊,使用不会太频繁,就没写成插件的模式,所有都是写死的,可以看下HTML代码结构。

整体效果展示

这类新手提示的插件还真是少,无奈之下自己写了一个,不带任何图片,完全css实现。因为考虑到功能比较特殊,使用不会太频繁,就没写成插件的模式,所有都是写死的,可以看下HTML代码结构:

  1. <div class="help"> 
  2.     <a href="###" class="close" title="关闭新手帮助">×</a> 
  3.     <div id="step1" class="step" step="1" style="top:60px;left:320px;width:250px"> 
  4.         <b class="jt jt_top" style="left:40px;top:-40px"></b> 
  5.         <p> 
  6.             <span class="h1"></span><span class="h2">注册登录</span> 
  7.             <br>点这里,点这里,点这里<br> 
  8.             <a href="###" class="next">下一步</a> 
  9.         </p> 
  10.     </div> 
  11.     <div id="step2" class="step" step="2" style="top:200px;left:400px;width:250px"> 
  12.         <b class="jt jt_left" style="top:20px;left:-40px"></b> 
  13.         <p> 
  14.             <span class="h1"></span><span class="h2">商品分类</span> 
  15.             <br>看到了么?看到了么?看到了么?<br> 
  16.             <a href="###" class="next">下一步</a> 
  17.         </p> 
  18.     </div> 
  19.     <div id="step3" class="step" step="3" style="top:200px;left:500px;width:250px"> 
  20.         <b class="jt jt_top" style="top:-40px;left:40px"></b> 
  21.         <p> 
  22.             <span class="h1"></span><span class="h2">搜索框</span> 
  23.             <br>这个就不用我介绍了吧 =)<br> 
  24.             <a href="###" class="over"> 完 成 </a> 
  25.         </p> 
  26.     </div> 
  27. </div> 

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

  1. <div id="step1" class="step" step="1" style="top:60px;left:320px;width:250px"> 
  2.     <b class="jt jt_top" style="left:40px;top:-40px"></b> 
  3.     <p> 
  4.         <span class="h1"></span><span class="h2">注册登录</span> 
  5.         <br>点这里,点这里,点这里<br> 
  6.         <a href="###" class="next">下一步</a> 
  7.     </p> 
  8. </div> 

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

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

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

  1. *{margin:0;padding:0}  
  2. form,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,p{list-style:none outside none}  
  3. a{text-decoration:none;color:#ccc;outline:none}  
  4. a:hover{text-decoration:none}  
  5. a img{border:none}  
  6. .fr{float:right}  
  7. .fl{float:left}  
  8. .disn{display:none}  
  9.    
  10. html{height:100%;overflow:hidden;-moz-user-select:none;-khtml-user-select:none;user-select:none}  
  11. body{font:12px/1.8 \5FAE\8F6F\96C5\9ED1,\5B8B\4F53;background:url(bg.png)}  
  12.    
  13. .help{position:absolute;z-index:5555;width:100%;height:100%;background:none rgba(0000.7);display:none}  
  14. .help .close{float:right;font-size:40px;color:#fff;width:40px;height:40px;line-height:36px;text-align:center;background:none}  
  15. .help .close:hover{background:none rgba(0000.7)}  
  16. .help .step{position:absolute;color:#eee;padding:0 20px 15px;background:none rgba(0000.7);border-radius:5px;display:none}  
  17. .help .step .jt{font-size:0;height:0;border:20px solid rgba(0000);position:absolute}  
  18. .help .step .jt_left{border-right:20px solid rgba(0000.7)}  
  19. .help .step .jt_right{border-left:20px solid rgba(0000.7)}  
  20. .help .step .jt_top{border-bottom:20px solid rgba(0000.7)}  
  21. .help .step .jt_bottom{border-top:20px solid rgba(0000.7)}  
  22. .help .step .h1{font-size:40px;font-weight:bold}  
  23. .help .step .h2{font-size:28px;font-weight:bold;padding-left:10px}  
  24. .help .step .next,  
  25. .help .step .over{border:1px solid #fff;color:#fff;padding:0 5px;float:right;margin-top:10px}  
  26. .help .step .next:hover,  
  27. .help .step .over:hover{background:none rgba(5050500.7)} 
  1. $(function(){  
  2.     $('.help').show();  
  3.     $('#step1').show();  
  4.     $('.close').on('click',function(){  
  5.         $('.step').hide();  
  6.         $('.help').hide();  
  7.     });  
  8.     $('.next').on('click',function(){  
  9.         var obj = $(this).parents('.step');  
  10.         var step = obj.attr('step');  
  11.         obj.hide();  
  12.         $('#step'+(parseInt(step)+1)).show();  
  13.     });  
  14.     $('.over').on('click',function(){  
  15.         $(this).parents('.step').hide();  
  16.         $('.help').hide();  
  17.     });  
  18. }); 

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

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

【编辑推荐】

  1. 由布局学习CSS:从CSS sprites重视background
  2. 浅谈Web自动化测试原理
  3. 手机WEBKIT引擎HTML元素定位和事例
  4. Node.js vs Opa: Web框架杀手
  5. 设计好脾气的Web页面
责任编辑:林师授 来源: 胡尐睿丶的博客
相关推荐

2021-10-19 22:23:47

CSSBeautiful按钮

2011-02-15 09:39:37

Ubuntu OneUbuntu 11.0

2022-02-21 07:02:16

CSSbeautiful按钮

2020-11-04 13:55:06

CSS密室逃脱前端

2022-08-10 16:08:38

鸿蒙CSS

2013-04-08 14:07:28

CSS

2023-11-22 07:47:34

2009-07-14 14:18:41

Myeclipse E代码提示

2019-11-28 13:39:43

JavaJava虚拟机程序员

2019-11-28 19:00:38

Java开发者编程语言

2022-08-29 17:39:53

应用开发css动画

2021-01-19 12:16:10

CSS前端UI

2009-12-14 16:04:23

MyEclipse 6

2022-11-24 16:11:27

2022-11-23 10:22:12

组件库前端

2017-04-27 14:05:59

CSS动画前端

2023-03-21 21:22:27

提示工程预测NLG

2021-04-10 08:02:14

Windows10操作系统微软

2011-03-03 09:35:04

js

2015-04-24 10:05:15

HTML+CSS阿童木头像
点赞
收藏

51CTO技术栈公众号