最近,html5無限滾動的效果廣受歡迎,因為它可以讓網頁無需刷新就可以持續加載下一頁內容。今天,我將介紹如何下載html5無限滾動的代碼,讓你也可以在自己的網站上實現這一效果。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="jquery.infinitescroll.js"></script> <script> $(document).ready(function() { $('#content').infinitescroll({ navSelector : "div.navigation", nextSelector : "div.navigation a:first", itemSelector : "#content div.post" }); }); </script>
以上的代碼是一個基礎的html5無限滾動代碼,它的核心是用了一個 jQuery插件叫作 infinite-scroll。這個插件可以在用戶滾動網頁時自動加載新頁面的內容,而不是顯示“下一頁”的鏈接。
使用這個插件一般要指定三個元素:
- navSelector:指定用于加載下一頁的鏈接容器。如:<div class="navigation">。
- nextSelector:指定能夠觸發下一頁鏈接的下一頁元素的選擇器。比如:<a href="/page/2/">。
- itemSelector:指定用于無限滾動的元素。這個元素一般是網頁正文的外容器元素。如:<div id="content">。
下載html5無限滾動代碼的方法很簡單,你只需要打開 jQuery infinite-scroll的 GitHub 頁面,然后直接下載最新版本代碼即可。如果下載后需要修改,你可以打開里面的 js 文件進行編輯。
總之,html5無限滾動是一個非常實用的效果,可以在用戶體驗上大大提升網站的交互性和反應速度。如果你也想要在自己的網頁上實現這種無限下拉效果,那就趕快去下載 html5無限滾動代碼吧!
上一篇sb admin.css
下一篇html5日期選擇的代碼