首页 > php教程 > PHP开发 > 如何使用Intro.js 创建绚丽的分步指南效果

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

WBOY
发布: 2016-06-07 17:23:01
原创
1330 人浏览过

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.
登录后复制
相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门推荐
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板