intro.js 页面引导简单用法
下载地址：http://pan.baidu.com/share/link?shareid=1894002026&uk=1829018343
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="introjs.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="intro.js"></script>
<script type="text/javascript">
$(function(){
introJs().setOptions({
//对应的按钮
prevLabel:"上一步",
nextLabel:"下一步",
skipLabel:"跳过",
doneLabel:"结束",
//对应的数组，顺序出现每一步引导提示
steps: [
{
//第一步引导
//这个属性类似于jquery的选择器， 可以通过jquery选择器的方式来选择你需要选中的对象进行指引
element: '#div1',
//这里是每个引导框具体的文字内容，中间可以编写HTML代码
intro: '这是第一个DIV~~',
//这里可以规定引导框相对于选中对象出现的位置 top,bottom,left,right
position: 'right'
},
{
//第二步引导
element: '#div2',
intro: '这是第二个DIV~~',
position: 'right'
},
{
//第三步引导
element: '.div3',
intro: '<a href="www.cnblogs.com">这是第三个DIV</a>~~',
position: 'bottom'
}
] }).start();
});
</script>
</head>
<body>
<div id="div1" style="width:150px;height:50px;">这里出现第一步引导</div>
<div id="div2" style="width:150px;height:50px;">这里出现第二步引导</div>
<div class="div3" style="width:150px;height:50px;">这里出现第三步引导</div>
</body>
</html>
intro.js 页面引导简单用法的更多相关文章
- Intro.js的简介和用法
Intro.js 是用于向首页使用网站或者移动应用添加漂亮的分布指南效果,引导用户的js框架.支持使用键盘的前后方向键导航,使用 Enter 和 ESC 键推出指南.Intro.js 是 GitHub ...
- Vue.js几个简单用法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 网站引导页插件intro.js 的用法
intro.js是一个用于制作网页引导效果的js插件,用法很简单,intro.js.v2.0.rar 1.在需要的页面添加引用 intro.js introjs.css 这两个文件已经足够,但是文件夹 ...
- JS的简单用法
JS的简单用法 参考:http://www.w3school.com.cn/js/js_switch.asp JavaScript 是网络的脚本语言 JavaScript 是可插入 HTML 页面的编 ...
- 网站功能操作分布引导插件：Intro.js介绍；React里如何使用Intro.js以及如何进行分页导航
插件作用:使用向导,引导新用户正确使用Web网站.我的环境是React+Mobx. 基本使用介绍,参加代码地址里的README.md:https://github.com/usablica/intro ...
- jquery.validate.js 表单验证简单用法
引入jquery.validate.js插件以及Jquery,在最后加上这个插件的方法名来引用.$('form').validate(); <!DOCTYPE html PUBLIC " ...
- Js用户引导插件intro
1.demo直接贴上来了,有什么不懂的,直接去官网上看,地址:https://introjs.com/. 2.这个intro插件的版本是v2.7.0,复制下来代码,引入库应该直接可以运行. 3.点评一 ...
- js刷新页面location.reload()用法
转: js刷新页面location.reload()用法 2018年05月10日 10:23:28 大灰狼的小绵羊哥哥 阅读数 31359更多 分类专栏: [前端面试点滴知识 ] 本文介绍了js刷 ...
- Intro.js 网站演示
Intro.js 为您的网站和项目提供一步一步的.更好的介绍 使用简单 引入 js 和 css,然后在代码中加入步骤和介绍. 快速小巧 7 KB 的 JavaScript 和 3 KB CSS,就是全 ...
随机推荐
- poj3041 二分图最小顶点覆盖
Asteroids Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 17237 td>Accepted: 9375 ...
- BZOJ 2818
2818:GCD Description 给定整数$N$,求$1\le x,y\le N$且$\gcd{x,y}$为素数的数对$(x,y)$有多少对. Input $N$ Output RT Samp ...
- 如何高效利用GitHub
是Github,让社会化编程成为现实.本文尝试谈谈GitHub的文化.技巧与影响. Q1:GitHub是什么 Q2:GitHub风格 Q3: 在GitHub,如何跟牛人学习 Q4: 享受纯粹的写作与演 ...
- CentOS 关闭蜂鸣器声音
也许你会遇到像我这样的情况,每次使用Linux终端,当听到发出“嘀嘀”的声音时候,我都有种把我的机箱拆掉把那个内置的蜂鸣装置拽下来的冲动.按 Tab时候“嘀嘀”,按空格时候“嘀嘀”,每个在vi中错误的 ...
- python安装问题
安装MinGW之后 出现.. 解决方案 ================
- 【USACO】namenum
//开始傻×了 受题目形容的误导 一心想生成所有可能的 字符串组合 之后查找非常慢 //听了同学的 将5000个dict里的字符串 转换成char型数组(不能直接用int 会越界)直接用输入的数据对着 ...
- HDU 5754 Life Winner Bo (各种博弈) 2016杭电多校联合第三场
题目:传送门 题意:一个国际象棋棋盘,有四种棋子,从(n,m)走到(1,1),走到(1,1)的人赢,先手赢输出B,后手赢输出G,平局输出D. 题解:先把从(n,m)走到(1,1)看做是从(1,1)走到 ...
- Linux用户名显示-bash-4.1$快速排查
最近项目使用的的服务器有点多(100多台),很多开发同事经常问这个问题,现在整理如下: 几个可能导致的原因: 1 用户的家目录所属组被改为root,解决方法使用root执行cd /home/;chow ...
- Windows环境下配置Vim为Python的IDE
(一)安装Python 2.7 在官网下载Python,并安装,我的安装路径是D:\Program Files\Python.安装完成后编辑环境变量Path,在其后添加;D:\Program File ...
- 用php输入表格内容
<body> <table width="100%" border="1" cellpadding="0" cellspa ...