溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹如何使用jQuery插件實現引導頁效果，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
首先記得加載所需的css文件和jQuery庫文件，以及pagewalkthrough插件。
<!-- CSS -->
<link type="text/css" rel="stylesheet" href="css/jquery.pagewalkthrough.css" />
<!-- jQuery -->
<script type="text/javascript" src="jquery.min.js"></script>
<!-- Page walkthrough plugin -->
<script type="text/javascript" src="jquery.pagewalkthrough.min.js"></script>
接著，我們在頁面的最下部加入引導內容，就是每一步需要展示的內容，默認先隱藏內容，等會用jQuery調用。
<p id="walkthrough-content">
<p id="walkthrough-1">
<h4>歡迎來到Helloweba示例DEMO演示頁</h4>
<p>頁面功能介紹引導頁的效果是通過一款叫做pagewalkthrough.js的jQuery插件實現的。</p>
<p>點擊下一步了解更多...</p>
</p>
<p id="walkthrough-2">
這里是Helloweba網站LOGO，點擊這里可以直通網站首頁。
</p>
<p id="walkthrough-3">
點擊這里可以直接看插件的使用教程。
</p>
<p id="walkthrough-4">
點擊這里去下載源碼，免費的哦。。
</p>
<p id="walkthrough-5">
這是頁腳和版權信息。
</p>
</p>
引導內容支持html內容，你可以在里面加入鏈接、圖片等信息。還有就是引導頁所需的箭頭圖片已經打包好，直接用css調用，關于字體，你可以調用外部字體，如手寫字體可能效果更好。
你完全可以在頁面底部加入如下代碼來調用pagewalkthrough，關鍵選項steps是一個數組，定義每一步引導調用的內容，參數wrapper定義了當前引導對應的元素位置，參數popup定義彈出提示引導層，參數content定義關聯的內容元素，參數type定義彈出方式，包括tooltip和modal以及nohighlight三種方式，參數position定義了彈出層位置，包括top,left, right or bottom。
$(function() {
$('body').pagewalkthrough({
name: 'introduction',
steps: [{
popup: {
content: '#walkthrough-1',
type: 'modal'
}
}, {
wrapper: '#logo',
popup: {
content: '#walkthrough-2',
type: 'tooltip',
position: 'bottom'
}
}, {
wrapper: 'h3.top_title a',
popup: {
content: '#walkthrough-3',
type: 'tooltip',
position: 'bottom'
}
}, {
wrapper: 'a[href="http://www.xuebuyuan.com/down-286.html"]',
popup: {
content: '#walkthrough-4',
type: 'tooltip',
position: 'right'
}
}, {
wrapper: '#footer p',
popup: {
content: '#walkthrough-5',
type: 'tooltip',
position: 'top'
}
}]
});
// Show the tour
$('body').pagewalkthrough('show');
});
保存之后，運行就能看到你要的效果。pagewalkthrough.js插件官方提供了很多參數配置，包括設置彈出層寬度、滾動速度，是否自動滾動，鎖定滾動，以及多種回調函數，定義上一步下一步按鈕，以及方法調用等等，這些本文不再描述。
以上是“如何使用jQuery插件實現引導頁效果”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
