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,就是全 ...
随机推荐
- Leetcode 之Construct Binary Tree（52）
根据先序和中序构造二叉树.根据中序和后序构造二叉树,基础题,采用递归的方式解决,两题的方法类似.需要注意的是迭代器的用法. //先序和中序 TreeNode *buildTree(vector< ...
- Git SSH Key 生成步骤
it是分布式的代码管理工具,远程的代码管理是基于ssh的,所以要使用远程的git则需要ssh的配置. github的ssh配置如下: 一 . 设置git的user name和email: $ git ...
- 【转】 JSONObject使用方法
随笔- 46 文章- 0 评论- 132 JSONObject简介 本节摘要:之前对JSON做了一次简单的介 绍,并把JSON和XML做了一个简单的比较:那么,我就在想,如果是一个json格式的字 ...
- iOS 利用Context裁剪图片
下面的代码可以裁剪出圆形的图片, 1,先把不规则图片转成正方形图片 UIGraphicsBeginImageContext(newSize); [image drawInRect:CGRectMake ...
- Price List
Price List Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 262144/131072 K (Java/Others)Tota ...
- markdown下编辑latex数学公式
在利用为知笔记编写笔记的时候,有时需要用的markdown,只要把文件名加上后缀.md,就可以使用markdown语法,以下介绍在markdown下编辑latex数学公式. 使用LaTeX写公式的基本 ...
- Android 4.0源码目录结构
转:http://blog.csdn.net/xiangjai/article/details/9012387 在学习Android的过程中,学习写应用还好,一开始不用管太多代码,直接调用函数就可以了 ...
- ***CI中的数据库操作(insert_id新增后返回记录ID)
在system/application/config 文件夹和里面的config文件里已经配置了参数 $active_group = "default";$db['default' ...
- SVN服务器搭建和使用（三）（转载）
转载地址:http://www.cnblogs.com/xiaobaihome/archive/2012/03/20/2408089.html 接下来,试试用TortoiseSVN修改文件,添加文件, ...
- oracle 10g 学习之多表查询、分组函数（6）
笛卡尔集 l 笛卡尔集会在下面条件下产生: 省略连接条件 连接条件无效 所有表中的所有行互相连接 l 为了避免笛卡尔集, 可以在 WHERE 加入有效的连接条件. 自连接 select m.las ...