您当前的位置:首页 > 网站建设 > javascript
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax |

fullpage.js全屏滚动的具体使用方法

51自学网 2022-05-02 21:31:26
  javascript

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的区别详解
51自学网,即我要自学网,自学EXCEL、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。
京ICP备13026421号-1