关于使用 intro 插件进行网站引导

本文主要是介绍关于使用 intro 插件进行网站引导，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

可以到官网进行下载：https://github.com/usablica/intro.js/

引入 js 与 css 就可以了，非常方便且intro占用空间很小

<link rel="stylesheet" type="text/css" href="intro.css">

<script type="text/javascript" src="intro.js"></script>

 

使用：

添加以下属性到 需要进行引导的 HTML 代码中（比如某一个div，table）

  data-step   网站引导的第几步 （必填），

  data-intro    引导的介绍内容

  data-position   介绍内容显示在方向（left  right  top  bottom）

 

设置属性：（在 intro.js 里面）

 

01	function IntroJs(obj) {

02	this._targetElement = obj;

03

04	this._options = {

05	/* Next button label in tooltip box 下一步*/

06	nextLabel: 'Next →',

07	/* Previous button label in tooltip box 返回*/

08	prevLabel: '← Back',

09	/* Skip button label in tooltip box 跳过*/

10	skipLabel: 'Skip',

11	/* Done button label in tooltip box */

12	doneLabel: 'Done',

13	/* Default tooltip box position */

14	tooltipPosition: 'bottom',

15	/* Next CSS class for tooltip boxes */

16	tooltipClass: '',

17	/* Close introduction when pressing Escape button? 是否使用键盘的Esc退出*/

18	exitOnEsc: true,

19	/* Close introduction when clicking on overlay layer? 是否允使点击空白的地方退出*/

20	exitOnOverlayClick: true,

21	/* Show step numbers in introduction? 是否显示说明的数据步骤*/

22	showStepNumbers: true,

23	/* Let user use keyboard to navigate the tour? 是否允许使用键盘来操作*/

24	keyboardNavigation: true,

25	/* Show tour control buttons?使用按纽操作 */

26	showButtons: true,

27	/* Show tour bullets? */

28	showBullets: true,

29	/* Scroll to highlighted element? */

30	scrollToElement: true,

31	/* Set the overlay opacity 设置弹出层的透明度*/

32	overlayOpacity: 0.8

33

};

34

}

 

 

 

之后就能看到绚丽的分步网站引导效果了！

 

 

这篇关于关于使用 intro 插件进行网站引导的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---