fullpage全屏/整屏滚动组件简单实例Demo ╰+攻爆jí腚メ 2021-06-10 20:41 361阅读 0赞 效果图如下，鼠标滚动可以切换div模块： ![20151217111612933][] ![20151217111609011][] 需要引用的js和css文件有（网络上的连接有时候会失效，在此给出离线的下载地址）： [<link rel="stylesheet" href="css/jquery.fullPage.css" />][link rel_stylesheet_ href_css_jquery.fullPage.css_] [<script type="text/javascript" src="js/jquery.js"></script>][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.easings.min.js_script] [<script type="text/javascript" src="js/jquery.fullPage.js"></script>][script type_text_javascript_ src_js_jquery.fullPage.js_script] 代码如下： <!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][http_download.csdn.net_detail_u014175572_9363695] fullpage.js的cdnjs连接地址：[https://cdnjs.com/libraries/fullPage.js][https_cdnjs.com_libraries_fullPage.js] https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/jquery.fullPage.css https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/jquery.fullPage.js https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/jquery.fullPage.min.css https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/jquery.fullPage.min.js https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/vendors/jquery.easings.min.js https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/vendors/jquery.slimscroll.js https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/vendors/jquery.slimscroll.min.js [20151217111612933]: /images/20210522/202d2e274c6c4213904b4bb6ff1f9206.png [20151217111609011]: /images/20210522/ea984b1d022d49ebb01ac398a9e87ec3.png [link rel_stylesheet_ href_css_jquery.fullPage.css_]: http://download.csdn.net/detail/u014175572/9363711 [script type_text_javascript_ src_js_jquery.js_script]: http://download.csdn.net/detail/u014175572/9363773 [script type_text_javascript_ src_js_jquery.easings.min.js_script]: http://download.csdn.net/detail/u014175572/9363543 [script type_text_javascript_ src_js_jquery.fullPage.js_script]: http://download.csdn.net/detail/u014175572/9363781 [http_download.csdn.net_detail_u014175572_9363695]: http://download.csdn.net/detail/u014175572/9363695 [https_cdnjs.com_libraries_fullPage.js]: https://cdnjs.com/libraries/fullPage.js
还没有评论，来说两句吧...