下载地址：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 页面引导简单用法的更多相关文章

  1. Intro.js的简介和用法

    Intro.js 是用于向首页使用网站或者移动应用添加漂亮的分布指南效果,引导用户的js框架.支持使用键盘的前后方向键导航,使用 Enter 和 ESC 键推出指南.Intro.js 是 GitHub ...

  2. Vue.js几个简单用法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

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

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

  4. JS的简单用法

    JS的简单用法 参考:http://www.w3school.com.cn/js/js_switch.asp JavaScript 是网络的脚本语言 JavaScript 是可插入 HTML 页面的编 ...

  5. 网站功能操作分布引导插件：Intro.js介绍；React里如何使用Intro.js以及如何进行分页导航

    插件作用:使用向导,引导新用户正确使用Web网站.我的环境是React+Mobx. 基本使用介绍,参加代码地址里的README.md:https://github.com/usablica/intro ...

  6. jquery.validate.js 表单验证简单用法

    引入jquery.validate.js插件以及Jquery,在最后加上这个插件的方法名来引用.$('form').validate(); <!DOCTYPE html PUBLIC " ...

  7. Js用户引导插件intro

    1.demo直接贴上来了,有什么不懂的,直接去官网上看,地址:https://introjs.com/. 2.这个intro插件的版本是v2.7.0,复制下来代码,引入库应该直接可以运行. 3.点评一 ...

  8. js刷新页面location.reload()用法

    转: js刷新页面location.reload()用法 2018年05月10日 10:23:28 大灰狼的小绵羊哥哥 阅读数 31359更多 分类专栏: [前端面试点滴知识 ]   本文介绍了js刷 ...

  9. Intro.js 网站演示

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

随机推荐

  1. hiho #1143 : 骨牌覆盖问题·一 （运用快速幂矩阵）

    #1143 : 骨牌覆盖问题·一 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 骨牌,一种古老的玩具.今天我们要研究的是骨牌的覆盖问题:我们有一个2xN的长条形棋盘,然 ...

  2. js判断元素是否隐藏的方法

    代码如下: JavaScript代码如下: if( document.getElementById("div").css("display")==='none' ...

  3. Nginx和PHP-FPM的启动/重启脚本 [转发]

    Nginx和PHP-FPM的启动/重启脚本 [转发] (2012-07-27 16:07:52) 标签: it 分类: 学习 转载自:http://blog.sina.com.cn/s/blog_53 ...

  4. 【转】Mybatis/Ibatis，数据库操作的返回值

    该问题,我百度了下,根本没发现什么有价值的文章:还是看源代码(详见最后附录)中的注释,最有效了!insert,返回值是:新插入行的主键(primary key):需要包含<selectKey&g ...

  5. 39.递归颠倒栈[ReverseStack]

    [题目] 用递归颠倒一个栈.例如输入栈{1, 2, 3, 4, 5},1在栈顶.颠倒之后的栈为{5, 4, 3, 2, 1},5处在栈顶. [分析] 乍一看到这道题目,第一反应是把栈里的所有元素逐一p ...

  6. mysql 我的学习

    安装要求 安装环境:CentOS-6.3安装方式:源码编译安装 软件名称:mysql-cluster-gpl-7.2.6-linux2.6-x86_64.tar.gz下载地址:http://mysql ...

  7. [Android Pro] PackageManager#getPackageSizeInfo (hide)

    referce to : http://www.baidufe.com/item/8786bc2e95a042320bef.html 计算Android App所占用d的手机内存(RAM)大小.App ...

  8. Cocos2dx实现象棋之布局

    开始界面 #ifndef SCENESTART_H #define SCENESTART_H #include "cocos2d.h" #include "SceneGa ...

  9. .net学习笔记---Asp.net的生命周期之二页生命周期

    用户请求 从 用户角度来说,我不管你后台经历了什么,我只想要我请求的页面.请求到服务器端,服务器必须得有所表示的是吧,即使不想搭理人家也得让IIS给人家说声:找不到服务器.请求来到服务器端,肯定要让服 ...

  10. JAVA开发第一步——JDK 安装

    JDK,Java Development Kit. And JRE ,Java Runtime Environment. jdk分64位和32位,可自行去Oracle官网下载 直接百度下载链接 Win ...