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='right'>@@##@@
说明：
data-step="1" --表示指引步骤，这里表示第一步
data-intro="网志博客logo"--描述内容，支持简的的html标签
data-position='right'--弹出层的方向，可以设置为left,middle和right
下面是演示效果
小结：在使用时发现，弹出层的相关按纽是英文标记的，如何按照我们的需求来改变呢，只需打开intro.js找到下面代码来修改即可。
function IntroJs(obj) {
this.<img src="/Public/ueditor/php/upload/20140818/14083713516009.jpg" title="20140818210014921.jpg" alt="如何使用Intro.js 创建绚丽的分步指南效果" >
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
4152
