這篇文章主要介紹如何使用jQuery插件實現引導頁效果，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創新互聯從2013年成立，先為臨清等服務建站，臨清等地企業，進行企業商務咨詢服務。為臨清企業網站制作PC+手機+微官網三網同步一站式服務解決您的所有建站問題。

HTML

首先記得加載所需的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調用，關于字體，你可以調用外部字體，如手寫字體可能效果更好。

jQuery

你完全可以在頁面底部加入如下代碼來調用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插件實現引導頁效果”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創新互聯行業資訊頻道！

當前文章：如何使用jQuery插件實現引導頁效果-創新互聯
文章網址：http://vcdvsql.cn/article46/cdgghg.html

成都網站建設公司_創新互聯，為您提供外貿建站、品牌網站建設、虛擬主機、搜索引擎優化、商城網站、服務器托管

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯