1.fullpage.js 下载地址https://github.com/alvarotrigo/fullPage.js 2.fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站,主要功能有: - 支持鼠标滚动
- 支持前进后退和键盘控制
- 多个回调函数
- 支持手机、平板触摸事件
- 支持 CSS3 动画
- 支持窗口缩放
- 窗口缩放时自动调整
- 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等
3.在相应的HTML页面中引入一下文件<link rel="stylesheet" href="css/jquery.fullPage.css" rel="external nofollow" ><script src="js/jquery.min.js"></script> <!-- jquery.easings.min.js 是必须的,用于 easing 参数,也可以使用完整的 jQuery UI 代替 --><script src="js/jquery.easings.min.js"></script> <!-- 如果 scrollOverflow 设置为 true,则需要引入 jquery.slimscroll.min.js,一般情况下不需要 --><script src="js/jquery.slimscroll.min.js"></script> <script src="js/jquery.fullPage.js"></script> 4.<body>部分
/*加导航的可点击*/<ul id="menu"> <li data-menuanchor="page1" class="active"> <a href="#page1" rel="external nofollow" >第一屏</a> </li> <li data-menuanchor="page2"> <a href="#page2" rel="external nofollow" >第二屏</a> </li> <li data-menuanchor="page3"> <a href="#page3" rel="external nofollow" >第三屏</a> </li> <li data-menuanchor="page4"> <a href="#page4" rel="external nofollow" >第四屏</a> </li></ul>/*鼠标滚动换/*<div id="dowebok"> <div class="section"> <h3>第一屏</h3> <p>fullPage.js vue-element-admin 全局loading加载等待 微信小程序bindtap与catchtap的区别详解 |