txcy008通过本文主要向大家介绍了jQuery,fullpage等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
今天说下jQuery的一款插件fullpage.js,可以实现全屏滚动，非常流行的效果，兼容性IE8+ 还算不错，使用网站有小米，等电子产品、汽车全屏滚动展示，看起来比较高大上，接下来我全面解析下此款插件！附我做的一个简易效果，刚入博客园，不知能怎么上demo，只能截图了！
兼容性:
- 支持 IE8+ 及其他现代浏览器。
主要功能：
1.支持鼠标滚动；
2.支持前进后退键盘控制;
3.多个回调函数;
4.支持手机.移动设备;
5.支持窗口缩放自动调整;
6.可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等;
7.支持CSS3动画;
实现方法：
1.插入jquery.fullPage.css;
2.插入jquery.js;
3.插入jquery-ui.js;(用于制作动画)
4.插入jquery.fullpage.js;
1 <link rel="stylesheet" href="jquery.fullPage.css"> 2 <script src="jquery-1.11.3.min.js"></script> 3 <script src="jquery-ui.js"></script> 4 <script src="jquery.fullPage.js"></script>
HTML:
如果你想定义一个不同的出发点，而不是一段或一部分的第一个幻灯片，只需添加active section，并放在你想加载幻灯片位置前。
为了在一个幻灯片内进行扩展另外的横向幻灯片，每个幻灯片将定义一个div。
1 <body> 2 <div id="fullpage"> 3 <div class="section s1"> 4 <img src="img/bc8.jpg" alt=""> 5 </div> 6 <div class="section s2"> 7 <img src="img/bc8.jpg" alt=""> 8 </div> 9 <div class="section s3"> 10 <img src="img/bc8.jpg" alt=""> 11 </div> 12 <div class="section s4"> 13 <img src="img/bc8.jpg" alt=""> 14 </div> 15 <div class="section s5"> 16 <