[关闭]
@EncyKe 2016-04-01T07:15:38.000000Z 字数 3592 阅读 2830

JS:新手引导界面

JavaScript 前端



一、JS原生方法

HTML部分

  1. <!-- S 黑色蒙版 -->
  2. <div id="mask"></div>
  3. <!-- E 黑色蒙版 -->
  4. <div id="searchTip">
  5. <div class="stepA"><a>下一步</a><span title="关闭">关闭</span></div>
  6. <div class="stepB"><a>下一步</a><span title="关闭">关闭</span></div>
  7. <div class="stepC"><a>下一步</a><span title="关闭">关闭</span></div>
  8. <div class="stepD"><a>下一步</a><span title="关闭">关闭</span></div>
  9. <div class="stepE"><a>下一步</a><span title="关闭">关闭</span></div>
  10. </div>

CSS部分

  1. /* reset */
  2. *{
  3. margin:0;
  4. padding:0;
  5. }
  6. html{
  7. height:100%; /* 解决透明度兼容特设 */
  8. }
  9. body{
  10. background:url(images/body.png) center top;
  11. height:100%;
  12. }
  13. /* 黑色遮罩层 */
  14. #mask{
  15. height:100%; /* 解决透明度兼容特设 */
  16. width:100%;
  17. position:absolute;
  18. top:0; left:0;
  19. background:#000;
  20. opacity:0.5;
  21. filter:alpha(opacity=50);
  22. display:none;
  23. }
  24. /* 绝对定位、居中的引导单元大容器 */
  25. #searchTip{
  26. width:980px;
  27. height:800px;
  28. position:absolute;
  29. left:50%;
  30. margin-left:-490px;
  31. display:none;
  32. }
  33. /* 每一步骤的容器公共定位样式 */
  34. #searchTip div{
  35. position:absolute;
  36. display:none;
  37. }
  38. /* 每一步骤各自样式 */
  39. .stepA{
  40. background:url(images/guide11.png);
  41. width:745px;
  42. height:329px;
  43. top:131px;
  44. left:-9px;
  45. }
  46. .stepB{
  47. background:url(images/guide21.png);
  48. width:647px;
  49. height:405px;
  50. top:2px;
  51. left:324px;
  52. }
  53. .stepC{
  54. background:url(images/guide31.png);
  55. width:654px;
  56. height:257px;
  57. top:294px;
  58. left:318px;
  59. }
  60. .stepD{
  61. background:url(images/guide41.png);
  62. width:558px;
  63. height:348px;
  64. top:78px;
  65. left:155px;
  66. }
  67. .stepE{
  68. background:url(images/guide51.png);
  69. width:397px;
  70. height:342px;
  71. top:79px;
  72. left:250px;
  73. }
  74. /* 下一步按钮公共样式 */
  75. #searchTip div a{
  76. position:absolute;
  77. width:95px;
  78. height:32px;
  79. text-indent:-999px; /* 隐藏文本设置 */
  80. overflow:hidden;
  81. cursor:pointer;
  82. }
  83. /* 下一步按钮各自位置 */
  84. .stepA a{ top:231px; left:490px; }
  85. .stepB a{ top:308px; left:146px;}
  86. .stepC a{ top:155px; left:400px; }
  87. .stepD a{ top:246px; left:304px;}
  88. .stepE a{ top:245px; left:153px;}
  89. /* 关闭按钮公共样式 */
  90. #searchTip div span{
  91. position:absolute;
  92. height:30px;
  93. width:30px;
  94. text-indent:-999px; /* 隐藏文本设置 */
  95. overflow:hidden;
  96. cursor:pointer;
  97. }
  98. /* 关闭按钮各自位置 */
  99. .stepA span{ top:144px; left:683px; }
  100. .stepB span{ top:196px; right:285px; }
  101. .stepC span{ top:44px; right:35px; }
  102. .stepD span{ top:135px; right:35px; }

JS部分

  1. window.onload=function(){
  2. var oMask = document.getElementById('mask');
  3. var oSearch = document.getElementById('searchTip');
  4. var aStep = oSearch.getElementsByTagName('div');
  5. var aA = oSearch.getElementsByTagName('a');
  6. var aClose = oSearch.getElementsByTagName('span');
  7. // 读取cookie,域名从cookie的第五个字符起;
  8. var res = document.cookie.substring(5);
  9. // 若如cookie,执行新手引导:
  10. if(res != "www.open.com.cn"){
  11. // 遮罩层、步骤容器及第一步骤显示;
  12. oMask.style.display = oSearch.style.display = aStep[0].style.display = 'block';
  13. // 下一步按钮;
  14. for( var i = 0; i < aStep.length; i++){
  15. //为每一个按钮增加一个index属性,便于后面引用;
  16. aA[i].index = i;
  17. aA[i].onclick = function(){
  18. this.parentNode.style.display = "none";
  19. // 判断是否到最后一个,若否,单击下一步显示下一步骤;
  20. if(this.index < aStep.length - 1){
  21. aStep[this.index + 1].style.display = "block";
  22. }
  23. // 判断是否到最后一个,若是,这个遮罩层和步骤容器关闭;
  24. else if( this.index == aStep.length - 1){
  25. oMask.style.display = oSearch.style.display = "none";
  26. }
  27. }
  28. }
  29. // 关闭按钮;
  30. for(var i = 0; i < aClose.length; i++){
  31. aClose[i].onclick = function(){
  32. oMask.style.display = oSearch.style.display = "none";
  33. }
  34. }
  35. // 添加cookie;
  36. var oDate = new Date();
  37. oDate.setDate(oDate.getDate()+30);
  38. // 定义cookie,过期时间expires为30天后;
  39. document.cookie = "name=www.open.com.cn;expires=" + oDate;
  40. }
  41. }

二、jQuery方法

JS部分

  1. $(function(){
  2. var res=document.cookie.substring(5);
  3. if(res!="www.open.com.cn"){
  4. $('#mask, #searchTip, #searchTip div:eq(0)' ).show();
  5. $('#searchTip div a').click(function(){
  6. var currentStep=$(this).parent();
  7. currentStep.hide();
  8. currentStep.next().show();
  9. })
  10. $('#searchTip div a:last, #searchTip div span').click(function(){
  11. $('#mask, #searchTip').hide();
  12. })
  13. var oDate=new Date();
  14. oDate.setDate(oDate.getDate()+30);
  15. document.cookie="name=www.open.com.cn;expires="+oDate;
  16. }
  17. })

附:参考

慕课:如何实现“新手引导”效果
Demo下载

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注