Intro.js的简介和用法
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的简介和用法的更多相关文章
- intro.js 页面引导简单用法
下载地址:http://pan.baidu.com/share/link?shareid=1894002026&uk=1829018343 <!DOCTYPE HTML PUBLIC & ...
- 网站引导页插件intro.js 的用法
intro.js是一个用于制作网页引导效果的js插件,用法很简单,intro.js.v2.0.rar 1.在需要的页面添加引用 intro.js introjs.css 这两个文件已经足够,但是文件夹 ...
- Intro.js 分步向导插件使用方法
简介 为您的网站和项目提供一步一步的.更好的介绍 Intro.js 目前兼容 Firefox.Chrome 和 IE8,不兼容 IE6 和 IE7,后续版本将会提供更好的兼容. 在线演示及下载 在线演 ...
- js进阶ajax基本用法(创建对象,连接服务器,发送请求,获取服务器传过来的数据)
js进阶ajax基本用法(创建对象,连接服务器,发送请求,获取服务器传过来的数据) 一.总结 1.ajax的浏览器的window对象的XMLHtmlRequest对象的两个重要方法:open(),se ...
- [转载]js中return的用法
一.返回控制与函数结果,语法为:return 表达式; 语句结束函数执行,返回调用函数,而且把表达式的值作为函数的结果 二.返回控制,无函数结果,语法为:return; 在大多数情况下,为事件处理函 ...
- js中this的用法
经过近几周的模拟面试题,我查询了一些资料,今天就来说说,在js中this的用法吧.方法有四:第一,用作全局变量,第二,用作表该对象,第三,用作构造函数,第四,用作call和applay
- Intro.js 网站演示
Intro.js 为您的网站和项目提供一步一步的.更好的介绍 使用简单 引入 js 和 css,然后在代码中加入步骤和介绍. 快速小巧 7 KB 的 JavaScript 和 3 KB CSS,就是全 ...
- Cwinux简介及用法简述
我在我的个人博客上发表了一篇文章 Cwinux简介及用法简述 http://apprentice89.com/cwinux_introduction_and_use/
- Node.js的简介和安装
一.Node.js的简介和安装 a) 什么是Node.js? Node.js是一个开发平台 让JavaScript运行在服务器端的开发平台 ---简单点说就是用JavaScript写服务器 ...
随机推荐
- SVM核技巧之终极分析
参考文献: http://www.blogjava.net/zhenandaci/archive/2009/03/01/257237.html http://www.cnblogs.com/jerry ...
- Windows下C++删除清除map
清除单map(非嵌套map) #include<map> #include<string> #include<iostream> using namespace s ...
- ZOJ 3432 Find the Lost Sock (异或的运用)
Alice bought a lot of pairs of socks yesterday. But when she went home, she found that she has lost ...
- Ubuntu终端及VI 快捷键
Ubuntu终端 快捷键 功能 Tab 自动补全 Ctrl+a 光标移动到开始位置 Ctrl+e 光标移动到最末尾 Ctrl+k 删除此处至末尾的所有内容 Ctrl+u 删除此处至开始的所有内容 Ct ...
- ThinkPHP3.2.3整合smarty模板(三)
在smarty模板中使用thinkphp框架的U方法时要主要的问题: 1.不能直接使用{:U('Index/index')}: 2.正确的使用方法为:<!--{U("Login/log ...
- spring boot 好文
配置: https://www.jianshu.com/p/3af2a8721d86 : Spring Boot启动报错:Whitelabel Error Page 分页: https://bbs.c ...
- 什么是PHP无限级分类
注:兄弟连PHP项目视频18讲有详细讲解.PHP和mysql(或是各种数据库)有较深的依奈关系,比如这里就是通过数据库的设 计,id,pid(parent id),path(所有父id构成的路径,如W ...
- python表单验证封装
在Web程序中往往包含大量的表单验证的工作,如:判断输入是否为空,是否符合规则. <!DOCTYPE html><html><head lang="en&quo ...
- RabbitMQ消息可靠性分析
消息中间件的可靠性是指对消息不丢失的保障程度:而消息中间件的可用性是指无故障运行的时间百分比,通常用几个 9 来衡量.不存在绝对的可靠性只能尽量趋向完美.并且通常可靠性也意味着影响性能和付出更大的成本 ...
- RAC 修改 spfile 参数
我们知道数据库的参数文件有spfile 和pfile. RAC 的参数文件比较特殊. 因为默认情况下,RAC的spfile 是放在共享设备上(RAW设备或者ASM磁盘组).而在各节点的pfile文件里 ...