Heim  >  Artikel  >  php教程  >  如何使用Intro.js 创建绚丽的分步指南效果

如何使用Intro.js 创建绚丽的分步指南效果

WBOY
WBOYOriginal
2016-06-07 17:23:011304Durchsuche

Intro.js 一款小巧的js插件,可以更好地为您的网站项目一步一步指导说明,支持使用键盘的前后方向键导航,使用 Enter 和 ESC 键推出指南。

说起js插件,我们就想起繁冗的js代码,而且下载缓慢。不过你不用担心,Intro.js十分小巧易用,只有intro.js和introjs.css两个小文件,总共不到50kB,请放心使用∩▂∩。

如何获取Intro.js

1、到官网https://github.com/usablica/intro.js/下载

2、到网志博客的百度网盘下载 http://pan.baidu.com/s/1jGFXeg2(附实例)

如何使用

1、加载文件

<script src="./intro/intro.js" type="text/javascript"></script>
<link href="./intro/introjs.css" rel="stylesheet" type="text/css" />

2) 添加 data-intro 和 data-step 到你的html元素里

例如

<div class="col-md-2" data-step="1" data-intro="网志博客logo" data-position=&#39;right&#39;><img name="logo" src="./images/logo.gif"   style="max-width:90%" alt="">

说明:

data-step="1" --表示指引步骤,这里表示第一步

data-intro="网志博客logo"--描述内容,支持简的的html标签

data-position='right'--弹出层的方向,可以设置为left,middle和right

下面是演示效果

如何使用Intro.js 创建绚丽的分步指南效果

如何使用Intro.js 创建绚丽的分步指南效果

如何使用Intro.js 创建绚丽的分步指南效果

小结:在使用时发现,弹出层的相关按纽是英文标记的,如何按照我们的需求来改变呢,只需打开intro.js找到下面代码来修改即可。

function IntroJs(obj) {
    this.
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn