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写服务器 ...
随机推荐
- 【error】Invalid ADAPTORNAME specified. Type 'imaqhwinfo' for a list of available ADAPTORNAMEs.
前言 使用matlab通过摄像头获取图像进行处理: 问题描述 使用matalb调用摄像头时出现错误: >> imaqhwinfo Warning: No Image Acquisition ...
- win8转win7+真正解决 “安装程序无法定位现有系统分区,也无法创建新的系统分区”的方法
问题情况:win8电脑转win7系统,出现问题:“安装程序无法定位现有系统分区,也无法创建新的系统分区” 第一种:猜测可行的方法: 1.老毛桃U盘启动电脑,进入PE系统后,直接使用Diskgeni ...
- ReSharper2017.3的列对齐、排版格式、列对齐错误的修复
ReSharper代码排版格式 列对齐 本文提供全流程,中文翻译.Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- ...
- Restrictions用法
HQL运算符 QBC运算符 含义 = Restrictions.eq() 等于equal <> Restrictions.ne() 不等于not equal > Restrict ...
- java8 流操作 好文网址
api 各方法详解(很不错!) http://blog.51cto.com/turnsole/2093185 api 各方法 简介: https://www.cnblogs.com/guguli/p/ ...
- ppt罗列项排版
关于罗列项的排版(1,....2,......3,......4,........)
- LG2521 [HAOI2011]防线修建
题意 题目描述 近来A国和B国的矛盾激化,为了预防不测,A国准备修建一条长长的防线,当然修建防线的话,肯定要把需要保护的城市修在防线内部了.可是A国上层现在还犹豫不决,到底该把哪些城市作为保护对象呢? ...
- TensorFlow笔记-07-神经网络优化-学习率,滑动平均
TensorFlow笔记-07-神经网络优化-学习率,滑动平均 学习率 学习率 learning_rate: 表示了每次参数更新的幅度大小.学习率过大,会导致待优化的参数在最小值附近波动,不收敛:学习 ...
- FP-growth算法发现频繁项集(二)——发现频繁项集
上篇介绍了如何构建FP树,FP树的每条路径都满足最小支持度,我们需要做的是在一条路径上寻找到更多的关联关系. 抽取条件模式基 首先从FP树头指针表中的单个频繁元素项开始.对于每一个元素项,获得其对应的 ...
- tomcat源码阅读之SingleThreadModel
一.接口简介: 实现了SingleThreadModel接口的servlet类只能保证在同一时刻,只有一个线程执行该servlet实例的service方法,在tomcat实现中会创建多个servlet ...