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

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

WBOY
풀어 주다: 2016-06-07 17:23:01
원래의
1329명이 탐색했습니다.

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으로 문의하세요.
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿