jQ uery插件pagewalkthrough實現引導頁效果

發布時間:2017-06-07 08:10 來源:互聯網 當前欄目:web技術類

   這篇文章主要介紹了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>
  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、
  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、