這篇文章主要介紹了jQuery插件pagewalkthrough實現引導頁效果的方法和示例代碼，十分的詳細和實用，有需要的小伙伴可以參考下。
現在很多網站不僅是介紹，更多的是有一些功能，怎么樣讓客戶快速的知道網站有哪些功能呢?這里pagewalkthrough.js插件能幫我們實現，它是一個輕量級的jQuery插件，它可以幫助我們創建一個遮罩引導層，
html代碼：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <div id="walkthrough-content"> <div id="walkthrough-1"> <h3>歡迎來到網頁引導示例DEMO演示頁</h3> <p>頁面功能介紹引導頁的效果是通過一款叫做<a href="https://github.com/jwarby/jquery-pagewalkthrough" target="_blank">pagewalkthrough.js</a>的jQuery插件實現的。</p> <p>點擊下一步了解更多...</p> </div> <div id="walkthrough-2"> 這里是網站LOGO，點擊這里可以直通網站首頁。 </div> <div id="walkthrough-3"> 點擊這里可以直接看插件的使用教程。 </div> <div id="walkthrough-4"> 點擊這里去下載源碼，免費的哦。。 </div> <div id="walkthrough-5"> 這是頁腳和版權信息。 </div> </div>js文件和代碼：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.pagewalkthrough.min.js"></script> <script> $(function() { // Set up tour $('body').pagewalkthrough({ name: 'introduction', steps: [ { popup: {content: '#walkthrough-1',type: 'modal' } }, {wrapper: '#logo',popup: {content: '#walkthrough-2',type: 'tooltip',position: 'bottom'} }, {wrapper: 'h2.top_title a',popup: {content: '#walkthrough-3',type: 'tooltip',position: 'bottom'} }, {wrapper: 'a[href="http://files.cnblogs.com/files/hnyei/jq_zhezhaoyd.rar"]', 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'); }); </script>新聞熱點
疑難解答
