這篇文章主要介紹如何使用jQuery插件實現(xiàn)引導頁效果,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
成都創(chuàng)新互聯(lián)從2013年成立,先為臨清等服務建站,臨清等地企業(yè),進行企業(yè)商務咨詢服務。為臨清企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。首先記得加載所需的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)用外部字體,如手寫字體可能效果更好。
你完全可以在頁面底部加入如下代碼來調(diào)用pagewalkthrough,關(guān)鍵選項steps是一個數(shù)組,定義每一步引導調(diào)用的內(nèi)容,參數(shù)wrapper定義了當前引導對應的元素位置,參數(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ù)配置,包括設置彈出層寬度、滾動速度,是否自動滾動,鎖定滾動,以及多種回調(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://bm7419.com/article46/cdgghg.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供外貿(mào)建站、品牌網(wǎng)站建設、虛擬主機、搜索引擎優(yōu)化、商城網(wǎng)站、服務器托管
聲明:本網(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)
猜你還喜歡下面的內(nèi)容