下载地址：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. 在pc游览器端模拟移动端幻灯片

    用简单的思路写了下pc端模拟web端的图片滑动效果... 效果卡,bug多,完毕,继续学习c3方法写这个,iscroll就是可以模拟这种效果,还在学习中,难点<触点判断> 代码一份 < ...

  2. DICOM：DICOM3.0网络通信协议

    转载:http://blog.csdn.net/zssureqh/article/details/41016091 背景: 专栏取名为DICOM医学图像处理原因是:博主是从医学图像处理算法研究时开始接 ...

  3. C 结构体小结

    看了三天结构体,是时候总结一下了. 关于结构体的声明: struct Student { ]; char sex; int age; ]; }; /*然后定义一个Student 类型的 student ...

  4. 【SpringMVC】SpringMVC系列15之SpringMVC最佳实践

    15.SpringMVC最佳实践 15.1.遵循Restful API最佳实践 参考:http://segmentfault.com/a/1190000002949234 15.2.统一返回字段 15 ...

  5. 在Sharepoint 2010中启用Session功能的说明文档

    在Sharepoint 2010中启用Session功能的说明文档 开发环境:Windows 7系统,SharePoint Server 2010,Visual Studio 2010 按以下步骤进行 ...

  6. encode和decode

    Python字符串的encode与decode研究心得乱码问题解决方法 为什么会报错“UnicodeEncodeError: 'ascii' codec can't encode characters ...

  7. python时间转换

    #设a为字符串 import time a = "2011-09-28 10:00:00" #中间过程,一般都需要将字符串转化为时间数组 time.strptime(a,'%Y-% ...

  8. linux shell脚本守护进程监控svn服务

    最近搭建的svn服务不知道什么原因服务总是被关闭(如果你不知道怎么搭建svn可以参考linux下搭建svn版本控制软件),因此用shell脚本实现一个守护进程.用于监控svn服务是否启动,如果服务不在 ...

  9. Greedy:Packets(POJ 1017)

    装箱问题1.0 题目大意:就是一个工厂制造的产品都是正方形的,有1*1,2*2,3*3,4*4,5*5,6*6,高度都是h,现在要包装这些物品,只能用6*6*h的包装去装,问你怎么装才能使箱子打到最小 ...

  10. hdu 1160 FatMouse's Speed 解题报告

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1160 题目意思:给出一堆老鼠,假设有 n 只(输入n条信息后Ctrl+Z).每只老鼠有对应的weigh ...