Intro.js 是用于向首页使用网站或者移动应用添加漂亮的分布指南效果,引导用户的js框架。支持使用键盘的前后方向键导航,使用 Enter 和 ESC 键推出指南。Intro.js 是 GitHub 上的开源项目,目前仅支持 Chrome、Firefox、Safari 浏览器,其它浏览器的兼容已加入 Roadmap 中。

Intro.js演示: 在线演示 Intro.js下载: 你可以从开源项目网站 github 上获取到最新的源码 转到 github intro.js 源码页面 从 CDN官网上下载最新的版本, 点击下载

将第二步下载到的 intro.js 加入到你的项目中,在你项目的 UI 页面中引入 intro.js 脚本 introjs.css 样式
在 hmtl 元素的标签中引用 data-intro 和 data-step属性,例如:

<a href='http://google.com/'
data-intro='Hello step one!'></a>

然后引用以下js 函数 : introJs().start();

如果想定位到指定的位置,可以这样写:
introJs(".divtest").start();
这就会定位到 class 属性为 divtest 的标签。

运行效果如下:

演示源码下载:

下载源码 密码: 3a0o

Intro.js的简介和用法的更多相关文章

  1. intro.js 页面引导简单用法

    下载地址:http://pan.baidu.com/share/link?shareid=1894002026&uk=1829018343 <!DOCTYPE HTML PUBLIC & ...

  2. 网站引导页插件intro.js 的用法

    intro.js是一个用于制作网页引导效果的js插件,用法很简单,intro.js.v2.0.rar 1.在需要的页面添加引用 intro.js introjs.css 这两个文件已经足够,但是文件夹 ...

  3. Intro.js 分步向导插件使用方法

    简介 为您的网站和项目提供一步一步的.更好的介绍 Intro.js 目前兼容 Firefox.Chrome 和 IE8,不兼容 IE6 和 IE7,后续版本将会提供更好的兼容. 在线演示及下载 在线演 ...

  4. js进阶ajax基本用法(创建对象,连接服务器,发送请求,获取服务器传过来的数据)

    js进阶ajax基本用法(创建对象,连接服务器,发送请求,获取服务器传过来的数据) 一.总结 1.ajax的浏览器的window对象的XMLHtmlRequest对象的两个重要方法:open(),se ...

  5. [转载]js中return的用法

    一.返回控制与函数结果,语法为:return 表达式; 语句结束函数执行,返回调用函数,而且把表达式的值作为函数的结果 二.返回控制,无函数结果,语法为:return;  在大多数情况下,为事件处理函 ...

  6. js中this的用法

    经过近几周的模拟面试题,我查询了一些资料,今天就来说说,在js中this的用法吧.方法有四:第一,用作全局变量,第二,用作表该对象,第三,用作构造函数,第四,用作call和applay

  7. Intro.js 网站演示

    Intro.js 为您的网站和项目提供一步一步的.更好的介绍 使用简单 引入 js 和 css,然后在代码中加入步骤和介绍. 快速小巧 7 KB 的 JavaScript 和 3 KB CSS,就是全 ...

  8. Cwinux简介及用法简述

    我在我的个人博客上发表了一篇文章 Cwinux简介及用法简述 http://apprentice89.com/cwinux_introduction_and_use/

  9. Node.js的简介和安装

    一.Node.js的简介和安装 a)       什么是Node.js? Node.js是一个开发平台 让JavaScript运行在服务器端的开发平台 ---简单点说就是用JavaScript写服务器 ...

随机推荐

  1. 好玩的Python库tqdm (转载)

    原文地址: https://blog.csdn.net/zejianli/article/details/77915751 可以显示循环的进度条的库,再也不用担心不知道程序跑到哪里还要跑多久了 tqd ...

  2. 高并发中nginx较优的配置

    一.这里的优化主要是指对nginx的配置优化,一般来说nginx配置文件中对优化比较有作用的主要有以下几项: 1.nginx进程数,建议按照cpu数目来指定,一般跟cpu核数相同或为它的倍数. wor ...

  3. 内网渗透中SSh的巧用

    后续应该会做个实例 转自:http://www.myhack58.com/Article/html/3/8/2009/25156.htm 经常遇到如下情形,内部网络主机通过路由器或者安全设备做了访问控 ...

  4. HPU 1007: 严格递增连续子段(贪心)

    1007: 严格递增连续子段 [模拟] 时间限制: 1 Sec 内存限制: 128 MB提交: 244 解决: 18 统计 题目描述 给定一个有NN个正整数组成的序列,你最多可以改变其中一个元素,可以 ...

  5. width百分比

    table中的td可以在页面中直接在元素上设置width:但是li不能只能在页面中写style: <!-- <li width="20%" class="p- ...

  6. Java调用.Net WebService参数为空解决办法 (远程)调试webservice方法

    同事遇到一个很囧的问题,java调,netwebservice的时候,调用无参数方法成功,调用有参数的方法每次我这边的webservice日志都记录参数为空,而我自己.Net程序调用完全没有问题,后面 ...

  7. Digester库使用总结

    1.Digester是Apache软件基金会的Jakarta项目下的子Commons项目下的一个开源项目,Digester API包含3个包:org.apache.commons.digester,提 ...

  8. 【转】每天一个linux命令(33):df 命令

    原文网址:http://www.cnblogs.com/peida/archive/2012/12/07/2806483.html linux中df命令的功能是用来检查linux服务器的文件系统的磁盘 ...

  9. ElementUI 知识点

    类型是number的el-input 去掉滚轮事件: @mousewheel.native.prevent <el-input type="number" @mousewhe ...

  10. Qt下 QString转char*(转)

    Qt下面,字符串都用QString,确实给开发者提供了方便,想想VC里面定义的各种变量类型,而且函数参数类型五花八门,经常需要今年新那个类型转换 Qt再使用第三方开源库时,由于库的类型基本上都是标准的 ...