1.引入

<!-- Add IntroJs styles -->
<link href="../../introjs.css" rel="stylesheet"> <script type="text/javascript" src="../../intro.js"></script>

2.启动

onclick="javascript:introJs().start();"

3.步骤对应说明

<h1 data-step="1" data-intro="This is a tooltip!">Basic Usage</h1>

<ul class="nav nav-pills pull-right" data-step="5" data-intro="Get it, use it.">
<li><a href="https://github.com/usablica/intro.js/tags"><i class='icon-black icon-download-alt'></i> Download</a></li>
<li><a href="https://github.com/usablica/intro.js">Github</a></li>
<li><a href="https://twitter.com/usablica">@usablica</a></li>
</ul>

它会自动识别html中的各个步骤,按照步骤显示提示信息。自动判断谁是最后一步,点击完成,关闭遮罩层。

源码下载

app引导效果introjs的使用的更多相关文章

  1. [Android实例] app引导页(背景图片切换加各个页面动画效果)(申明:来源于网络)

    [Android实例] app引导页(背景图片切换加各个页面动画效果)(申明:来源于网络) 地址: http://www.eoeandroid.com/thread-918356-1-1.html h ...

  2. 高仿京东到家APP引导页炫酷动画效果

    前言 京东到家APP的引导页做的可圈可点,插画+动效,简明生动地说明了APP最吸引用户的几个亮点(商品多,价格低,配送快...).本文主要分析拆解这些动画效果,并完成一个高仿Demo,完整的Demo代 ...

  3. iOS - GitHub干货分享(APP引导页的高度集成 - DHGuidePageHUD - ①)

    好长时间没更新博客, 是时候来一波干货分享了;APP引导页话不多说每一个APP都会用到,分量不重但是不可缺少,不论是APP的首次安装还是版本的更新,首先展现给用户眼前的也就只有它了吧,当然这里讲的不是 ...

  4. App 引导界面

    App 引导界面 1.前言 最近在学习实现App的引导界面,本篇文章对设计流程及需要注意的地方做一个浅显的总结. 附上项目链接,供和我水平类似的初学者参考——http://files.cnblogs. ...

  5. GitHub干货分享(APP引导页的高度集成 - DHGuidePageHUD)

    每一个APP都会用到APP引导页,分量不重但是不可缺少,不论是APP的首次安装还是版本的更新,首先展现给用户眼前的也就只有它了,当然这里讲的不是APP引导页的美化而是APP引导页的高度集成,一行代码搞 ...

  6. iOS - GitHub干货分享(APP引导页的高度集成 - DHGuidePageHUD - ②)

    距上一篇博客"APP引导页的高度集成 - DHGuidePageHUD - ①"的发布有一段时间了, 后来又在SDK中补充了一些新的内容进去但是一直没来得及跟大家分享, 今天来跟大 ...

  7. swiper实现臭美app滑动效果

    一.臭美app效果: 我的需求是这样,上面正常滑动,点击下面的小卡牌,上面的滑动区也随之切换到当前的点击态. 二.实现: css: 主要设置可见区域的几张卡牌的位置,注意的几个位置是,中间的激活态和左 ...

  8. 仿建设银行APP首页效果

    仿建设银行APP首页效果 下载地址: http://pan.baidu.com/s/1eRMYEzC 下载后需要解压,解压密码联系:390980233  收费88元 HTML+JS实现,下载即可试用. ...

  9. app引导页(背景图片切换加各个页面动画效果)

    前言:不知不觉中又加班到了10点半,整个启动页面做了一天多的时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求 ...

随机推荐

  1. Vue组件使用基础

    这篇博文用来记录 .vue 组件的使用方法. 可以把组件代码按照 template.style.script 的拆分方式,放置到对应的 .vue 文件中. 模板(template).初始数据(data ...

  2. myssql数据库表名转驼峰 - PLAY - ITeye博客

    原文:myssql数据库表名转驼峰 - PLAY - ITeye博客

  3. 05004_Linux的其他命令和权限命令

    1.其他命令 (1)显示当前所在位置 命令:pwd (2)搜索命令 a.命令:grep 要搜索的字符串 要搜索的文件 示例:搜索/etc/sudu.conf文件中包含字符串to的行 b.搜索/etc/ ...

  4. POJ——T 3687 Labeling Balls

    http://poj.org/problem?id=3687 Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 14842   ...

  5. Qt之布局管理器

    简述 Qt的布局系统提供了一个简单的和强有力的方式,来自动排列窗口子控件布局. 所有QWidget子类可以使用布局来管理他们的子控件.QWidget::setLayout()函数可以为一个控件布局.当 ...

  6. max带来的冲突

    题目要求: /* * Copyright (c) 2014, 烟台大学计算机学院 * All rights reserved. * 文件名:sum123.cpp * 作 者:林海云 * 完毕日期:20 ...

  7. spark一些入门资料

    spark一些入门资料 A Scala Tutorial for Java Programmers http://docs.scala-lang.org/tutorials/scala-for-jav ...

  8. elasticsearch中的几个概念总结

    1.Geo spatial search : 地理空间搜索,可以在搜索查询中指定的某一距离内查找所要的内容.也可以返回以当前为圆心,逐渐添加圆的半径.直到找到所匹配到的内容. 參考:http://ww ...

  9. Android configChanges使用方法

    1.    在manifest文件里使用activity的默认属性.横屏竖屏时,惠重复调用onDestory和onCreate  造成不必要的开销.Android默认如此应该是为了适配不同的xml布局 ...

  10. hdoj--1556--Color the ball(模拟&&树状数组)

    Color the ball Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) T ...