下载地址：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. 使用HTML5 Web存储的localStorage和sessionStorage方式

    localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用.sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同 ...

  2. 38.输出1到最大的N位数[Print 1 to max number of N bits]

    [题目] 输入数字n,按顺序输出从1最大的n位10进制数.比如输入3,则输出1.2.3一直到最大的3位数即999. [分析] 这是一道很有意思的题目.看起来很简单,其实里面却有不少的玄机. [常规思路 ...

  3. Solr5.3.1整合IKAnalyzer

    由于solr5.3.1本身不支持中文分词,而msseg4j的分词效果不明显.因而采用IK进行分词,然而参考http://www.superwu.cn/2015/05/08/2134/在google上下 ...

  4. python 将pdf分页后插入至word中

    所用技术 1. python编程基础 2. 使用pyPdf 3. 使用python操作word 4. 正则表达式的使用 5. windows的bat编程 下面是一个pyPdf库使用的示例: from ...

  5. 【读书笔记】读《JavaScript设计模式》之工厂模式

    一个类或对象中往往会包含别的对象.在创建这种成员对象时,你可能习惯于使用常规方式,也即用new关键字和类构造函数.问题在于这回导致相关的两个类之间产生依赖性. 工厂模式用于消除这两个类之间的依赖性,它 ...

  6. Android之网络编程

    本文主要包括三方面内容 Httpurlconnection中doGet与doPost方法实现提交数据到服务器 HttpClient中doGet与doPost方法实现提交数据到服务器 android-a ...

  7. svn Error: post-commit hook failed (exit code 127) with output

    Command: Commit Modified: C:\Users\xsdff\Desktop\project\index.html Sending content: C:\Users\xsdff\ ...

  8. ubuntu下简单的驱动编译

    转自:http://www.eefocus.com/jefby1990/blog/13-02/291628_c39b8.html 本文是参考了网上多篇帖子而写的算不上什么原创.唯一值得欣慰的只不过在本 ...

  9. WordPress主题制作函数

    WordPress基本模板文件 一套完整的WordPress模板应至少具有如下文件: style.css: CSS(样式表)文件 index.php: 主页模板 archive.php: Archiv ...

  10. Android Studio打包未签名包

    Android Studio打包未签名包 好久没有写技术博客了,真有点懈怠了,作为35岁的程序员,转行重新捡起这些知识,还是挺犹豫纠结的,不过没啥其它办法,一点一滴开始吧,今天这开篇就小结点前几天工作 ...