下載地址: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>