fullpage全屏/整屏滚动组件简单实例Demo

来源：互联网发布：p相片软件编辑：程序博客网时间：2024/05/16 18:16

效果图如下，鼠标滚动可以切换div模块：

需要引用的js和css文件有（网络上的连接有时候会失效，在此给出离线的下载地址）：

代码如下：

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>fullpage实例</title><link rel="stylesheet" href="css/jquery.fullPage.css" /><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/jquery.easings.min.js"></script><script type="text/javascript" src="js/jquery.fullPage.js"></script><script>$(document).ready(function(){$("#fullpage").fullpage();//激活fullpage})</script></head><body><div id="fullpage"><div class="section">第一层：练气</div><div class="section">第二层：筑基</div><div class="section">第三层：结丹</div><div class="section">第四层：元婴</div><div class="section">第五层：化神</div></div></body></html>

Demo下载地址：http://download.csdn.net/detail/u014175572/9363695

fullpage.js的cdnjs连接地址：https://cdnjs.com/libraries/fullPage.js

https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/jquery.fullPage.csshttps://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/jquery.fullPage.jshttps://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/jquery.fullPage.min.csshttps://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/jquery.fullPage.min.jshttps://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/vendors/jquery.easings.min.jshttps://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/vendors/jquery.slimscroll.jshttps://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/vendors/jquery.slimscroll.min.js

0 0