前端之js-引导页

来源：互联网发布：数据库关系模型分析编辑：程序博客网时间：2024/05/16 11:54
引导页插件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>
阅读全文
0 0