-
fullpage方法的使用： $.fn.fullpage.方法名称() 方法：moveSectionUp() moveSectionDown() moveTo(section,slide):滚动到第几页，第几个slide，页面是从一开始，slide是从0开始的 moveSlideRight():幻灯片向右滚动 moveSliadLeft（）：幻灯片向左滚动 setAutoScrolling（boolean）：动态设置autoScrolling setLockAnchors(boolean):动态设置lockAnchor setRecordHistory(boolean):动态设置recordHistory setScrollingSpeed(milliseconds):动态设置scrollingspped setAllowScrolling（Boolean，[directions]）:添加或删除鼠标滚轮/滑动控制，第一个参数表示是否启用，第二个为方向：all，up，down，left，right，方向可以取多个值，用逗号隔开 destroy(type):type为空时，则fullpage特效消失，但HTML样式，结构仍存在；type为all时，则页面的一切均消失 reBuild（）：重新更新页面和尺寸，用于通过ajax请求后改变了页面结构之后，重建效果。 延迟加载图片及视频： <img data-src=""> <video> <source data-src="" type=""> </video>(在src之前加data-就可调用)查看全部
-
个人认为需要更改的配置项： fullpage({ sectionsColor:['green','','',],//为各个section添加背景色 anchors：['page1','','',],//在各个section地址栏地址后面添加锚链接，使各个section地址不同，便于直接找到某一section menu：‘#ul的ID’，//(在这之前要先设置一个<ul id=""><li data-menuanchor="page1"><a href="#page1">section1</a></li></ul>),data-menuanchor以及href的值都是与锚链接相对应的，可以通过ul对页面滚动控制 scrollBar： ，//默认为false，若为true，则页面滚动与滚动条滚动均有效 paddingTop/paddingBottom: ,//为每个section顶部或底部添加padding，默认为0 fixedElements：‘#固定元素的ID’//固定元素，默认为null，设置此属性后，再在css中设置position：fixed，在页面滚动时，固定元素位置不动，如果不加这个属性，则固定元素会被section覆盖 continuousVertial： ，//是否循环滚动，默认为false，若为true，则循环滚动，但是不会像loopTop与loopBottom那样生硬（此属性与这两个loop不兼容） scrollOverflow： ，//内容超过满屏后是否显示滚动条，默认为false，如果设置为true，则再引入jquery.slimscroll，这时拖动滚动条就会滚动查看，这个插件主要用于模拟传统的浏览器滚动条 })查看全部
-
配置项： recordHistory： ，是否记录浏览历史，默认为true，可以记录页面滚动的历史，可以通过浏览器的前进后退来导航，如果设置了autoScrolling：false，则这个属性也被关闭； menu：'#ul的ID名'，(在这之前要先设置一个<ul id=""><li data-menuanchor="page1"><a href="#page1">section1</a></li></ul> ps:data-menuanchor以及href的值都是与锚链接相对应的) navigation：是否显示小圆点导航，默认为false navigationPosition：，导航小圆点的位置，可设置为left或者right navigationTooltips：，导航小圆点的提示，与每个页面对应，['','','',''] showActiveTooltip: ,默认为false，设置为true时，则在小圆点处会自动显示navigationTooltips的内容。 slidesNavigation： ，是否显示横向幻灯片的导航，默认为false slidesNavPosition： ，幻灯片的导航位置，默认为bottom，还可为top scrollOverflow： ，内容超过满屏后是否显示滚动条，默认为false，如果设置为true，则再引入jquery.slimscroll,这时拖动滚动条就会滚动查看，，这个插件主要用于模拟传统的浏览器滚动条 sectionSelector： ，section的选择器，默认为.section； slideSelector： ，slide的选择器，默认为slide查看全部
-
配置项： easing： ，定义页面section的滚动方式，默认为easeInOutCubic，如果修改此项需引入jquery.easings插件或 jquery ui， css3： ，是否使用css3 transforms来实现滚动效果，默认为true，可以提供支持css3的浏览器，比如移动设备等的速度 loopTop： ，滚动到顶部后是否连续滚动到底部，默认为false； loopBottom： ，滚动到底部以后是否连续滚动到顶部，默认为false； loopHorizontal： ，横向slide是否循环滚动，默认为true； autoScrolling： ，是否使用插件的滚动方式，默认为true，，如果为false，则会出现浏览器的滚动条，将不会按页滚动，而是按照滚动条的行为来滚动。 scrollBar： ，是否包含滚动条，默认为false，如果设置为true，则按页滚动与滚动条滚动均有效 paddingTop/paddingBottom: ,设置每一个section的顶部和底部的padding，默认为0； fixedElements：‘#ID名’，固定的元素，默认值为null，需要为其配置一个jquery选择器，在页面滚动的时候，fixedElements设置的元素固定不动，如果不加这个属性，那么你想固定的东西会被覆盖掉； keyboardScrolling： ，是否可以使用键盘方向键导航，默认为true； touchSensitivity： ，在移动设备中滑动页面的敏感性，默认为5，最高为100，越大越难滑动 continuousVertial: ,是否循环滚动，默认为false，如果设置为true，则页面会循环滚动，但是不会像loopTop/loopBottom那样生硬（这个属性和两个loop不兼容）， animateAnchor：锚链接是否可以控制滚动动画，默认为true，若设置为false，则通过锚链接定位到某个section时不会有动画查看全部
-
fullpage.js控制页面是否滚动setAllowScrolling查看全部
-
还可以添加配置项： 在fullpage（{ sectionsColor:['','','',''],//分别为各个section设置背景颜色 controlArrows： ，默认为true，定义是否通过箭头来控制slide vertical： ，默认为true，每一页的内容是否垂直居中； resize： ，默认为false，字体是否随着窗口缩放而缩放； scrollingSpeed： ，滚动速度，单位为毫秒，默认为700； anchors：['page1','','',''],定义锚链接，使每个section在地址栏有不同地址，便于直接找到某一section lockAnchors: ,默认为false，若为true，则所添加的anchors不会自动在地址栏生效，需手动在地址栏地址后面加上自己的命名 }）；查看全部
-
基本页面结构：默认显示的是第一个section，要想首先显示的不是第一个，则在想要显示的section后加一个active类。 <div id="fullpage"> <div class="section"> <div class="slide">slide1</div>//可以给每个页面加slide幻灯片 <div class="slide">slide2</div> <div class="slide">slide3</div> </div> <div class="section">content</div>//每一个section会成为一个页面 <div class="section">content</div> </div> 要想激活fullpage效果，要加入： <script> $(document).ready(function(){ $('#fullpage').fullpage(); })//在加载fullpage的时候引入fullpage方法。查看全部
-
全屏基础代码，不含动画查看全部
-
需要在页面引入的文件查看全部
-
到github上找到fullpage.js查看全部
-
哈哈查看全部
-
slide 幻灯片查看全部
-
cdnjs中可以搜索需要的js文件，不需要下载，只需要拷贝链接地址拷贝到文件里引用的地方查看全部
-
课程介绍 fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站。如今我们经常能见到全屏网站，在手机上也经常能看到一些活动页面。这些网站用几幅很大的图片或色块做背景，再添加一些简单的内容，通过滚动或者滑动来翻页，显得格外的高端大气上档次。查看全部
-
$("#fullpage").fullpage();查看全部
举报
0/150
提交
取消