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="www.cnblogs.com">這是第三個div</a>~~",
position: "bottom"
}
]
}).oncomplete(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>