下载地址：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. Coursera台大机器学习课程笔记8 -- Linear Regression

    之前一直在讲机器为什么能够学习,从这节课开始讲一些基本的机器学习算法,也就是机器如何学习. 这节课讲的是线性回归,从使Ein最小化出发来,介绍了 Hat Matrix,要理解其中的几何意义.最后对比了 ...

  2. poj3295

    Tautology Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10453   Accepted: 3967 Descri ...

  3. 如何高效利用GitHub

    是Github,让社会化编程成为现实.本文尝试谈谈GitHub的文化.技巧与影响. Q1:GitHub是什么 Q2:GitHub风格 Q3: 在GitHub,如何跟牛人学习 Q4: 享受纯粹的写作与演 ...

  4. ecshop的商品系统数据库整合

    -- 表的结构 `ecs_shop_config` '全站配置信息表'  商店设置   `id`   '全站配置信息自增id',`parent_id`  '父节点id,取值于该表id字段的值',`co ...

  5. thinkcentre m8380t黑屏 解决办法

    问题: 开机后,显示器上显示“无信号输入”,一直黑屏,但是主机的风扇.硬盘声音都正常. 解决办法: 把vga线等加紧了一些,屏幕还是不亮,然后我关掉插排电源,给cmos放了电,再重启就可以了. 这时需 ...

  6. 开发Web Service的几种方式

    本文作者在学习使用Java开发Web Service(不包括Restful)时,由于不知道Java有这么多框架支持开发Web Service一度陷入迷惘,不知道这些框架各有 什么不同,各有什么优缺点. ...

  7. Timer1控件的属性

  8. 【leetcode】Excel Sheet Column Number

    Excel Sheet Column Number Related to question Excel Sheet Column Title Given a column title as appea ...

  9. SSHPASS支持从命令行输入密码

    参考:http://www.2cto.com/os/201307/227911.html 手动下载地址:http://sourceforge.net/projects/sshpass/ 安装示例: w ...

  10. AJAX,JSON用户名校验

    效果 开发结构 1,src部分有两个包dao和servlet 1.1dao包下有两个数据库工具类文件 SqlHelper.java package org.guangsoft.dao; import ...