在同学们使用某些网站的新版本页面的时候，经常会出现一个类似于新手引导一样的效果，来帮助同学们更好的熟悉新版本页面的功能和使用，那么你知道应该如何才能够实现这种效果吗？小千今天就来给大家介绍一个非常好用的插件来实现这个效果，走过路过千万别错过啦。

      首先先给大家看一下最终的效果

      今天的主角Intro.js

      1、Intro.js的安装

      Intro.js 是一个轻量级的js库，用于创建一步一步的产品引导，支持使用键盘的前后方向键导航，使用 Enter 和 ESC 键推出引导，您可以通过几个简单的步骤安装Intro.js

      首先我们引入下述文件

      2、Intro.js基本使用

      接着在HTML文件中加入基本结构

      data-step 是步骤，data-intro 是对每一步的介绍。

      最后我们加入JS代码就可以通过浏览器运行查看效果啦(*￣︶￣)

      怎么样是不是已经看到效果了，接下来我们只需要美化一下就可以实现文章开头的效果了。最后附上完整版代码。

    希望本文的分享对大家有所帮助！

    本文来自千锋教育，转载请注明出处。

©著作权归作者所有：来自51CTO博客作者戏精程序媛的原创作品，如需转载，请注明出处，否则将追究法律责任

更多相关文章

1. 如何用Python批量修改文件名？
2. 页面布局有哪些技巧？前端页面怎么写？
3. 如何预测您的用户即将流失？
4. Procedure V2介绍
5. [首发~内附PDF]中国HBase技术社区第二届MeetUp举办圆满成功!
6. 再见，Python！你好，Go语言
7. 苏宁大数据离线任务开发调度平台实践：任务调度模块架构设计
8. 苹果电脑如何开启显示器减弱动态效果设置？
9. 苹果Mac如何关闭右上角的Siri显示？

随机推荐

1. 对于Android的文件结构介绍
2. Android 国际化 语言适配
3. Android 科大讯飞 在线和离线语音听写
4. android声音播放之SoundPool的应用，让你的
5. android listview多视图嵌套多视图
6. Android高可拓展框架Conductor源码解析(2
7. Android动画精讲一：从setTranslationX谈属
8. 安卓中MVC模式的深度思索和实践(二)
9. Android 通知(Notification)的基本用法
10. 使用Kotlin开发Android项目-Kibo(二)