如何使用jQuery插件實現(xiàn)引導頁效果-創(chuàng)新互聯(lián)

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

成都創(chuàng)新互聯(lián)從2013年成立，先為臨清等服務(wù)建站，臨清等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為臨清企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

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>

接著，我們在頁面的最下部加入引導內(nèi)容，就是每一步需要展示的內(nèi)容，默認先隱藏內(nèi)容，等會用jQuery調(diào)用。

<p id="walkthrough-content">    <p id="walkthrough-1">        <h4>歡迎來到Helloweba示例DEMO演示頁</h4>        <p>頁面功能介紹引導頁的效果是通過一款叫做pagewalkthrough.js的jQuery插件實現(xiàn)的。</p>        <p>點擊下一步了解更多...</p>    </p>    <p id="walkthrough-2">        這里是Helloweba網(wǎng)站LOGO，點擊這里可以直通網(wǎng)站首頁。    </p>    <p id="walkthrough-3">        點擊這里可以直接看插件的使用教程。    </p>    <p id="walkthrough-4">        點擊這里去下載源碼，免費的哦。。    </p>    <p id="walkthrough-5">        這是頁腳和版權(quán)信息。    </p> </p>

引導內(nèi)容支持html內(nèi)容，你可以在里面加入鏈接、圖片等信息。還有就是引導頁所需的箭頭圖片已經(jīng)打包好，直接用css調(diào)用，關(guān)于字體，你可以調(diào)用外部字體，如手寫字體可能效果更好。

jQuery

你完全可以在頁面底部加入如下代碼來調(diào)用pagewalkthrough，關(guān)鍵選項steps是一個數(shù)組，定義每一步引導調(diào)用的內(nèi)容，參數(shù)wrapper定義了當前引導對應(yīng)的元素位置，參數(shù)popup定義彈出提示引導層，參數(shù)content定義關(guān)聯(lián)的內(nèi)容元素，參數(shù)type定義彈出方式，包括tooltip和modal以及nohighlight三種方式，參數(shù)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插件官方提供了很多參數(shù)配置，包括設(shè)置彈出層寬度、滾動速度，是否自動滾動，鎖定滾動，以及多種回調(diào)函數(shù)，定義上一步下一步按鈕，以及方法調(diào)用等等，這些本文不再描述。

以上是“如何使用jQuery插件實現(xiàn)引導頁效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當前文章：如何使用jQuery插件實現(xiàn)引導頁效果-創(chuàng)新互聯(lián)
文章網(wǎng)址：http://muchs.cn/article46/cdgghg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、品牌網(wǎng)站建設(shè)、虛擬主機、搜索引擎優(yōu)化、商城網(wǎng)站、服務(wù)器托管

廣告

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