intro.js 页面引导简单用法 分享

时间：2021-05-28

intro.js demo http://usablica.github.io/intro.js/

第一步：在页面中引入 intro.js 和 introjs.css

第二步：选择你需要添加指引的区块，对区块添加唯一的id或者样式

第三步：写一个具体的js函数，完成引导功能

复制代码 代码如下:
<html>
<head>
<script src="@url.content("~/content/intro.js")" type="text/javascript"></script>
<link href="@url.content("~/content/introjs.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function(){
intro();
});
//每次页面加载时调用即可
function intro(){
//这个变量可以用来存取版本号， 系统更新时候改变相应值
cur_val = 1;
//判断函数所接收变量的长度
if (arguments.length ==0)
{
//每个页面设置不同的cookie变量名称，不可以重复，有新版本时，更新cur_val
//这里模拟很多网站有新版本更新时才出现一次引导页， 第二次进入进不再出现， 这里有cookie来判断
if ($.cookie("intro_cookie_index") == cur_val)
{
return;
}
}

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: "left"
},
{
//第三步引导
element: ".div3",
intro: "<a href="plete(function(){
//点击跳过按钮后执行的事件(这里保存对应的版本号到cookie,并且设置有效期为30天）
$.cookie("intro_cookie_index",cur_val,{expires:30});
}).onexit(function(){
//点击结束按钮后， 执行的事件
$.cookie("intro_cookie_index",cur_val,{expires:30});
}) .start();
}
</script>
</head>
<body>
<div id="div1">这里出现第一步引导</div>
<div id="div2">这里出现第二步引导</div>
<div class="div3">这里出现第三步引导</div>
</body>
</html>

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章