网站功能操作分布引导插件

 官网：

https://introjs.com/

 

要引入的js:

http://www.staticfile.org/

intro.js

 

function startIntro(){
                var intro = introJs();
                intro.setOptions({
                    //对应的按钮
                    prevLabel:"←上一步",
                    nextLabel:"下一步→",
                    skipLabel:"跳过",
                    doneLabel:"结束",
                    
                    steps: [
                    
                    {
                        element: document.querySelector(\'.topselect\'),
                        intro: "搜索功能"
                    },
                    {
                        element: document.querySelector(\'button.fullscreen\'),
                        intro: "全屏功能",
                        position: \'right\'
                    },
                    {
                        element: document.querySelector(\'div.keep-open\'),
                        intro: \'显示字段功能\',
                        position: \'left\'
                    },
                    {
                        element: document.querySelector(\'div.export\'),
                        intro: "导出功能",
                        position: \'bottom\'
                    },
                    {
                        element: document.querySelector(\'span.page-list\'),
                        intro: \'表格显示条数功能\',
                        position: \'top\'
                    },
                    {
                        element: document.querySelector(\'div.pagination\'),
                        intro: \'分页显示功能\',
                    }
                    ]
                });
                intro.start();
            }

 

中文引导工具(使用简单的div)

https://devework.com/intro-js.html