使用IntroJS实现页面引导-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_36251118/article/details/77947828

引导页插件introjs

<!doctype html>    
<html>    
 <head>    
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">    
  <meta name="renderer" content="webkit">    
  <title>demo</title>    
  <link rel="stylesheet" href="css/introjs.css">    

  <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>    
  <script type="text/javascript" src="js/intro.min.js"></script>    

  <style>    
    * {margin: 0; padding: 0;}    
    .f {margin: 30px 50px; background: red;}    
    .b {display: inline-block;}    
  </style>    
 </head>    
 <body>    
    <div class="a f" data-step="1" data-intro='欢迎进入XXX页面'>这是第1个引导</div>    
    <div class="b f" data-step="3" data-intro='完成'>这是第3个引导</div>    
    <div class="c f" data-step="2" data-intro='这里我们介绍一下使用方法'>这是第2个引导</div>    
 </body>    
  <script>    
    ;$(function() {    
        introJs().setOptions({    
            'prevLabel': '← 上一步',    
            'nextLabel': '下一步 →',    
            'skipLabel': '跳过',    
            'doneLabel': '完成',  
            'showBullets': false,//隐藏直接跳转按钮(避免onchangebug)    
        }).start().onexit(function() {//非常规退出 
            console.log('建议您看完');      
        }).oncomplete(function() {//正常完成    
            console.log('完成');
        }).onchange(function(obj) {//已完成当前一步    
            var curNum = parseInt($(obj).attr('data-step').match(/\d+/)[0]);//当前的下标    

            $('.tipStep'+ (curNum-1)).hide();//隐藏前一个    
            $('.tipStep'+ (curNum+1)).hide();//隐藏后一个    
            $(obj).show();//显示当前    
        });    
    });    
 </script>    
</html>

前端之js-引导页