intro.js

新用户引导新功能引导JS插件-intro.js

为什么使用intro.js?

当新用户访问你的网站或产品时,你应该使用一步一步的指南来展示你的产品特性。即使开发和添加新特性到您的产品,您也应该能够使用用户友好的解决方案将它们呈现给用户。intro.js是开源的,可以自由使用。和你的朋友分享这个项目。

如何使用

可以通过三个简单的步骤将intro.js添加到您的站点中:
1)在页面中包括intro.js和introjs.css(或者用于生产的缩小版本)。
2)调用此JavaScript函数,如:

$(function(){
function startIntro(){
var intro = introJs();
  intro.setOptions({
    steps: [
      { 
	intro: "You don't need to define element to focus, this is a floating tooltip."
      },
      {
	element: document.querySelector('#addnew'),
	intro: "This is a tooltip."
      },
      {
	element: document.querySelectorAll('#pt_menu_home')[0],
	intro: "Ok, wasn't that fun?",
	position: 'right'
      },
      {
	element: '#pt_menu4',
	intro: 'More features, more fun.',
	position: 'left'
      },
      {
	element: '.headimg',
	intro: "Another step.",
	position: 'bottom'
      },
      {
	element: '.MC_ind_linklist2',
	intro: 'Get it, use it.'
      }
    ]
  });

  intro.start();
}
startIntro();

3)在页面中点击触发函数调用,如:

<a href="javascript:void(0);" onclick="javascript:introJs().start();">开始引导</a>

4)官方完整技术文档:
https://introjs.com/docs

源码下载

GIT官网源码下载:https://github.com/usablica/intro.js
百度网盘源码下载:https://pan.baidu.com/s/1AkiYYsOoasyjIuLDvfm79w

发表评论