jQuery插件fullPage.js实现全屏滚动效果

2020-05-24 21:40:07易采站长站整理

} else {
$.fn.fullpage.setAutoScrolling(true);
}
}
autoScrolling();
});
</script>

fullPage.js 是 jQuery 的一个插件,主要功能是制作出全屏网站 fullPage插件的兼容性是兼容IE7浏览器往上 其余主流浏览器就不描叙了 fullpage插件支持以下操作

1、插件可以使用鼠标滑轮进行滚动

2、当竖屏的时候支持键盘的上下箭头滚动  横屏对照可以使用的是左右箭头

3、能使用 多个回调函数 制作出动画效果  但是需要涉及到jQuery ui的插件连接<在下面有>

4、fullPage 同样也是 支持 触摸事件  如可触摸式笔记本 平板  手机

5、能在属性操作时 使用css3动画 但是要注意 css3的兼容性

6、能够自适应 屏幕的大小

7、可以设置页面的滚动宽度 以及背景颜色 是否循环播放  可以时候回调函数  文本可以设置样式

使用 fullPage中我引用的文件具体如下所示  <必须注意链接顺序 先css文件 再jQuery 1.8.3版本的 然后才是 jQuer ul 或者是 fullPage插件>  注意! 所需链接文件可像我留言索要  也可寻找自行下载


<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css">
//这是设置关于插件的样式 需要链接
<script src="js/jquery.min.js"></script>
// jQuery 1.8.3版本
<script src="js/jquery-ui.js"></script>
// JQuery ui 版本1.12.1 <可选>需要设置Easing参数时 必须链接 否则出错
<script src="js/jquery.fullPage.js"></script>
// 最后是此次的正主 fullPage插件

配置

1、选项

2、方法

3、回调函数