夏日博客

A-A+

jquery guide插件实现页面引导提示用户操作

2016年01月07日 前端设计 暂无评论 阅读 5 views 次

guide页面引导插件可以帮助我们实现像新用户注册之后进入到会员中心界面有一个页面引导指示页面了，下面我来给大家介绍这个插件，不过大家要注意一点在此我们提供jquery与guide js文件哦，大家可官方下载。
适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.

jquery guide插件实现页面引导提示用户操作,js页面代码如下:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>jquery页面引导提示用户操作</title>  
  6. <link href="css/style.css" type="text/css" rel="stylesheet" />  
  7. <script type="text/javascript" src="js/jquery.1.4.2-min.js"></script>  
  8. </head>  
  9. <body>  
  10. <div class="headeline"></div>  
  11. <!--演示内容开始-->  
  12. <script type="text/javascript" src="js/guide.js"></script>  
  13. <style type="text/css">  
  14. *{margin:0;padding:0;list-style-type:none;}  
  15. a,img{border:0;}  
  16. body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";background:url(images/paper.jpg);}  
  17. #guide-step{width:952px;height:1106px;overflow:hidden;margin:0px auto;background:url(images/23458867.png) no-repeat;position:relative;}  
  18. /* tipbar */  
  19. .tipSwitch,.tipbox,.tipword,.progress li,.tipbar .arrow,.tipBarword{background:url(images/guidebg.png) no-repeat;}  
  20. #searchTip{overflow:hidden;}  
  21. .tipbox{width:290px;position:relative;height:190px;display:none;background-position:0 0;}  
  22. .tipbox .tipboxBtn{position:absolute;display:inline-block;width:25px;height:25px;left:236px;top:36px;cursor:pointer;}  
  23. .tipboxNextbtn{position:absolute;display:inline-block;width:82px;height:28px;left:159px;top:127px;cursor:pointer;}  
  24. .progress{position:absolute;left:71px;top:136px;width:60px;height:9px;line-height:9px;font-size:0px;}  
  25. .progress li{float:left;width:9px;height:9px;margin-right:6px;font-size:0px;background-position:-635px -82px;}  
  26. .progress .on{background-position:100% -82px;}  
  27. .tipword{position:absolute;}  
  28. #step1{z-index:1005;}  
  29. #step2{z-index:1004;}  
  30. #step3{z-index:1003;}  
  31. #step4{z-index:1002;}  
  32. #step1 .tipword{width:175px;height:56px;left:55px;top:60px;background-position:0 -217px;}  
  33. #step2 .tipword{width:212px;height:56px;left:36px;top:65px;background-position:-175px -217px;}  
  34. #step3 .tipword{width:195px;height:56px;left:46px;top:60px;background-position:-388px -217px;}  
  35. #step4 .tipword{width:210px;height:56px;left:43px;top:44px;background-position:0 -272px;}  
  36. #step4{width:290px;height:190px;background-position:-294px 0;}  
  37. #step4 .tipboxBtn{left:252px;top:20px;}  
  38. #step4 .tipboxNextbtn{left:84px;top:109px;}  
  39. .tipbarwrap{position:absolute;width:100%;height:1px;left:0px;top:0px;z-index:1000;background-color:transparent;}  
  40. .tipbardiv{position:relative;width:900px;height:1px;margin:0px auto;}  
  41. .tipbar{display:none;position:absolute;z-index:1000;}  
  42. .tipbarInner{position:relative;}  
  43. .tipbar .arrow{width:70px;height:46px;background-position:100% 0;position:absolute;}  
  44. .tipBarword{position:absolute;}  
  45. #tipbar1{background:url(images/stepflow-pic.png) no-repeat;width:615px;height:249px;left:93px;top:70px;}  
  46. #tipbar1 .arrow{left:284px;top:-42px;}  
  47. #tipbar1 .tipBarword{width:62px;height:25px;left:355px;top:-39px;background-position:-84px -192px;}  
  48. #tipbar2{background:url(images/stepflow-pic.png) no-repeat 0 -259px;width:768px;height:471px;top:330px;left:33px;}  
  49. #tipbar2 .arrow{left:284px;top:-42px;}  
  50. #tipbar2 .tipBarword{width:62px;height:24px;left:355px;top:-41px;background-position:-156px -192px;}  
  51. .clear{font-size:0px;line-height:0px;height:0px;overflow:hidden;}  
  52. #tipbar3{background:url(images/stepflow-pic.png) no-repeat 0px -740px;width:680px;height:280px;left:59px;top:816px;}  
  53. #tipbar3 .arrow{left:30px;top:-35px;}  
  54. #tipbar3 .tipBarword{width:62px;height:24px;background-position:-235px -192px;left:100px;top:-34px;}  
  55. #tipbar1 .tipbarInner{width:615px;height:249px;}  
  56. #tipbar2 .tipbarInner{width:768px;height:471px;}  
  57. #tipbar3 .tipbarInner{width:680px;height:280px;}  
  58. .notip{position:absolute;left:175px;top:112px;}  
  59. #notip{vertical-align:middle;}  
  60. .notip label{vertical-align:middle;color:#0c5685;}  
  61. .tipSwitch{width:80px;height:26px;cursor:pointer;background-position:0 -190px;cursor:pointer;position:absolute;top:15px;right:30px;}  
  62. </style>  
  63. <div id="guide-step" style="margin-top:-40px;">  
  64.  <div style="margin-top:270px;height:10px;line-height:99em;overflow:hidden;" id="stepflow03">  
  65.   第二步骤</div>  
  66.  <div style="margin-top:530px;height:10px;line-height:99em;overflow:hidden;" id="stepflow04">  
  67.   第三步骤</div>  
  68.  <div class="tipSwitch"></div>  
  69. </div>  
  70. <script type="text/javascript">  
  71. var tipVisible = GetCookie("tipVisible");  
  72. var neverShow = GetCookie("neverShow");  
  73. if(tipVisible != "no" && neverShow != "no"){  
  74.  showSearchTip();  
  75.  setSearchTip();  
  76. }  
  77. </script>  
  78. <!--演示内容结束-->  
  79. <div style="text-align:center;clear:both">  
  80. <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>  
  81. </div>  
  82. </body>  
  83. </html>  
标签：

给我留言