JavaScript--fullPage.js插件
GitHub:https://github.com/alvarotrigo/fullPage.js
FullPage.js是一个基于JQuery的插件,可以很方便的制作出全屏网站;
一 特点:
1.支持鼠标滚动;
2.支持键盘控制前进和后退;
3.多个回调函数;
4.支持手机/平板触摸事件;
5.支持CSS3动画;
6.支持窗口缩放,缩放时自动调整;
7.jQuery兼容1.7+;IE8+;
二 引入文件
1.引入FullPage.css
1 <link rel="stylesheet" href="css/jquery.fullpage.css">
2.引入jquery.js
1 <script src="js/jquery.min.js"></script>
3.引入easings.js增强动画过渡效果,也可以使用完整的jQuery UI代替;
1 <script src="js/jquery.easings.min.js"></script>
4.引入FullPage.js
1 <script src="js/jquery.fullpage.js"></script>
三 HTML结构
1 <!-- 每个section代表一屏,默认显示第一屏;如果要指定加载页面时显示的屏幕,可在对应的section加上class="active" --> 2 <div id="wrapper"> 3 <div class="section">第一屏</div> 4 <div class="section">第二屏</div> 5 <div class="section">第三屏</div> 6 </div> 7 8 <!-- 可在section内加入slide; --> 9 <div class="section"> 10 <div class="slide">第一屏的第一屏</div> 11 <div class="slide">第一屏的第二屏</div> 12 <div class="slide">第一屏的第三屏</div> 13 </div>
四 JavaScript调用
1 <script> 2 $(function(){ 3 $('#wrapper').fullpage(); 4 }); 5 </script>
五 配置
1 $(document).ready(function() { 2 $('#fullpage').fullpage({ 3 //Navigation 4 menu: false, // 绑定菜单,设置的相关属性与anchors的值对应后,菜单可以控制滚动; 5 anchors:['firstPage', 'secondPage'], // 定义锚链接; 6 navigation: false, // 是否显示项目导航; 7 navigationPosition: 'right', // 项目导航的位置; 8 navigationTooltips: ['firstSlide', 'secondSlide'], // 项目导航的tip; 9 showActiveTooltips: false, 10 slidesNavigation: true, // 是否显示左右滑动的项目导航; 11 slidesNavPosition: 'bottom', // 左右滑动的项目导航的位置; 12 13 //Scrolling 14 css3: true, // 是否使用CSS3-transforms滚动; 15 scrollingSpeed: 700, // 滚动速度; 16 autoScrolling: true, // 是否使用插件的滚动方式,选择false会出现滚动条; 17 fitToSection: true, 18 scrollBar: false, 19 easing: 'easeInOutCubic', // 滚动动画方式; 20 easingcss3: 'ease', 21 loopBottom: false, // 滚动到最底部是否滚回顶部; 22 loopTop: false, // 滚动到最顶部是否滚回底部; 23 loopHorizontal: true, // 左右滑块是否循环; 24 continuousVertical: false, // 是否循环滚动; 25 normalScrollElements: '#element1, .element2', 26 scrollOverflow: false, // 内容超过满屏后是否显示滚动条; 27 touchSensitivity: 15, 28 normalScrollElementTouchThreshold: 5, 29 30 //Accessibility 31 keyboardScrolling: true, // 是否使用键盘方向键导航; 32 animateAnchor: true, // 锚点控制滚动; 33 recordHistory: true, // 记录历史; 34 35 //Design 36 controlArrows: true, // 左右滑块箭头; 37 verticalCentered: true, // 内容是否垂直居中; 38 resize : false, // 字体是否随窗口缩放而缩放; 39 sectionsColor : ['#ccc', '#fff'], 40 paddingTop: '3em', // 与顶部距离; 41 paddingBottom: '10px', 42 fixedElements: '#header, .footer', // 定位某个元素; 43 responsive: 0, 44 45 //Custom selectors 46 sectionSelector: '.section', 47 slideSelector: '.slide', 48 49 //events 50 onLeave: function(index, nextIndex, direction){}, // 滚动前的回调函数; 51 afterLoad: function(anchorLink, index){}, // 滚动到某一屏后的回调函数; 52 afterRender: function(){}, // 页面结构生成后的回调函数; 53 afterResize: function(){}, 54 afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){}, // 滚动到某一水平滑块后的回调函数; 55 onSlideLeave: function(anchorLink, index, slideIndex, direction){} // 某一水平滑块滚动前的回调函数; 56 }); 57 });
转载于:https://www.cnblogs.com/yizihan/p/4560787.html
JavaScript--fullPage.js插件相关推荐
- fullPage.js插件用法(转发)
fullPage.js主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 动画 支持窗口缩放 窗口缩放时自动调整 可设置滚动宽度.背景颜色.滚动速 ...
- Jquary全屏滚动插件fullpage.js的使用
1. fullpage.js的主要功能 fullPage.js是一个基于jquery的插件,它能很方便的制作出全屏网站 2.引包 CDNJS地址: https://cdnjs.com/librarie ...
- 全屏滚动插件fullPage.js
效果效果 本文介绍使用fullPage.js插件可轻易创建全屏滚动网站.很多网站只有一个首页,它是由多个可以滚动的全屏内容组成,使用鼠标滚动或方向键可控制滚屏,支持CSS3动画和手机触屏,效果非常高大 ...
- jQuery全屏滚动插件fullPage.js
演 示 下 载 简介 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面(查看),Q ...
- jQuery插件jquery.fullPage.js
简介 如今我们经常能看到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或者色块做背景,再添加一些简单的内容, 显得格外的高端大气上档次,比如 iPone 5C 的介绍页面.QQ浏览器的官方网站.百 ...
- jQuery全屏滚动插件 Fullpage.js 及 move.js
Fullpage.js 引入文件 <link rel="stylesheet" href="css/jquery.fullPage.css"> &l ...
- 拥抱单页网站! jQuery全屏滚动插件fullPage.js
不知道从什么时候开始,单页网站就悄悄走进人们的视线,尤其是国外的网站,更是钟爱单页网站.制作一个全屏滚动的效果,然后每个滚动页弄一个好看的背景色,配上一些描述性的文字,大家都喜欢这么弄,仿佛逼格瞬间可 ...
- JavaScript(三)js插件
文章目录 一.日期组件(laydate) 二.Echarts图表统计(柱形统计图) 三.Echarts图表统计(扇形统计图) 四.Echarts图表统计(折线统计图) 一.日期组件(laydate) ...
- 流式布局之javascript实现照片瀑布流以及Macy.js插件实现瀑布流
文章目录 瀑布流的定义 一.实现效果 代码 首先是用javascript自己手写代码实现照片瀑布流 使用插件Mary.js照片流插件实现照片瀑布流 总结 瀑布流的定义 瀑布流是什么? 1.琳琅满目:整 ...
- html页面左右滑动固定插件,jQuery全屏滚动插件fullPage.js让你的页面分屏滚动
随着扁平化风格的日益流行,越来越多的网页越来越简单但又看上去高大上,比如小米.魅族.苹果等等知名站点的新品页面,以及360.百度等网站的专题页面越来越采用分屏滚动的风格. 当然实现这种风格的方法有多种 ...
最新文章
- SAP RETAIL初阶之商品主数据门店视图里没有WM数据
- 2018 Multi-University Training Contest 7 - Age of Moyu
- 被问概率达99%的面试问题
- Hadoop-Yarn-框架原理及运作机制
- 计算机java语言教程,计算机JAVA教程二讲Java语言基础知识.doc
- 总有个短信发来一行乱码_个别收到的短信乱码,有什么办法还原么。。。
- ubuntu 两块硬盘挂载不上_win10 轉 Ubuntu
- AI赋能DevOps:数据驱动的全栈工程师实践
- 1.5 编程基础之循环控制 45 金币 方法二(python3实现)
- 核函数的充要条件-Mercer定理的证明
- 使用Vitamio打造自己的Android万能播放器(6)——在线播放(播放列表)
- 基于ET6框架的资源热更
- 作为一名菜鸟的学习分享
- java jdom 设置第1行_使用JDOM操作XML
- 固定时间收敛的控制器设计(基础知识)
- 2021-11-09 PMIC RK817 处理POWER键流程linux 部分的简单分析,dts 中会用 interrupt-parent interrupts去处理按键的中断。
- linux之limit.conf
- 不折腾会死星人Kindle Paperwhite4拆机翻新记
- Python中的运算符与表达式 1
- 【渝粤教育】电大中专Windows操作系统 (2)作业 题库