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

 官网：

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