下载地址：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. FZU 1649 Prime number or not米勒拉宾大素数判定方法。

    C - Prime number or not Time Limit:2000MS     Memory Limit:32768KB     64bit IO Format:%I64d & % ...

  2. Python: 什么是*args和**kwargs

    转自: http://blog.sina.com.cn/s/blog_65a8ab5d0101fglm.html http://blog.csdn.net/chenjinyu_tang/article ...

  3. 【Other】千字文 硬笔 楷书 字帖

    <千字文>是我国最优秀的一篇训蒙教材,用一千个汉字勾划出一部完整的中国文化史的基本轮廓,代表了中国传统教育启蒙阶段的最高水平.<千字文>通篇首尾连贯,音韵谐美,读起来朗朗上口, ...

  4. MVC 详细说明

    .NET MVC执行过程: 1.网址路由比对 2.执行Controller与Action 3.执行View并返回结果 在使用MVC中是由IgnoreRoute()辅助方法对比成功的,会导致程序直接跳离 ...

  5. C语言指针总结

    C语言中的精华是什么,答曰指针,这也是C语言中唯一的难点. C是对底层操作非常方便的语言,而底层操作中用到最多的就是指针,以后从事嵌入式开发的朋友们,指针将陪伴我们终身. 本文将从八个常见的方面来透视 ...

  6. Android 中的AsyncTask

    在后台下载图片,下载完成后更新UI是一个很常见的需求.在没有AsyncTask类之前,我们需要写许多thread和Handler的代码去实现这个功能,有了AsyncTask,一切变得简单了.下面摘抄谷 ...

  7. Spring配置JNDI的解决方案

    我的配置环境是:Spring + Tomcat + MySql 说明: 1. $TOMCAT_HOME代表Tomcat的安装目录. 第一步:在Tomcat的$TOMCAT_HOME/conf/cont ...

  8. [Java] Java 打包成jar包 和 解压jar包

    解压jar包 jar xf xxx.jar 打包成jar包 方法一:通过jar命令 jar命令的用法: 下面是jar命令的帮助说明: 用法:jar {ctxui}[vfm0Me] [jar-file] ...

  9. kvm与selinux

    Desktop virsh start 16lnmp error: Failed to start domain 16lnmp error: unsupported configuration: Un ...

  10. C#对XML进行操作（添加、修改）

    XML文档内容如下: <?xml version="1.0" encoding="utf-8"?> <root> <first i ...