时间：2023-09-05 20:00:01 | 来源：网站运营
时间：2023-09-05 20:00:01 来源：网站运营
基于jQuery的全屏滚动插件fullPage.js：
在线咨询
<link rel="stylesheet" type="text/css" href="/fullpage/jquery.fullPage.css" /><script src="/fullpage/jquery.min.js"></script><script type="text/javascript" src="/fullpage/jquery.fullPage.js"></script>如果你需要自定义页面滚动的效果，你需要引入jquery.easings.min.js文件。<script src="/fullpage/jquery.easings.min.js"></script>对于内容比较多的页面，可以设置右侧的滚动条，但是默认情况下无法滚动，你需要jquery.slimscroll.min.js文件来自定义滑条滚动效果。<script type="text/javascript" src="/fullpage/jquery.slimscroll.min.js"></script>最后，如果你不想下载到项目中，您可以使用开源项目CDN服务，Fullpage在CDNJS的地址：https://cdnjs.com/libraries/fullPage.js<div id="fullpage'"><div class="section">Some section</div><div class="section">Some section</div><div class="section">Some section</div><div class="section">Some section</div></div>假如你需要让某一个section作为首页的第一屏展示，你只需要给这个section添加一个active的类，Fullpage会自动优先展示这个屏幕，例如定义下面的代码：<div class="section active">Some section</div>Fullpage自带左右滑动的幻灯片，只需要在section中添加DIV元素，并且给DIV元素添加slide类，FUllpage会自动生成幻灯片特效，例如下面的代码：<div class="section"><div class="slide"> Slide 1 </div><div class="slide"> Slide 2 </div><div class="slide"> Slide 3 </div><div class="slide"> Slide 4 </div></div>3、初始化Fullpage$(document).ready(function() {$('#fullpage').fullpage();});所有的选项设置更复杂的初始化可能看起来像这样：$(document).ready(function() { $('#fullpage').fullpage({ //Navigation menu: false,//绑定菜单，设定的相关属性与anchors的值对应后，菜单可以控制滚动，默认为false。 anchors:['firstPage', 'secondPage'],//anchors定义锚链接，默认为[] lockAnchors: false,//是否锁定锚链接，默认为false,设为true后链接地址不会改变 navigation: false,//是否显示导航，默认为false navigationPosition: 'right',//导航小圆点的位置 navigationTooltips: ['firstSlide', 'secondSlide'],//导航小圆点的提示 showActiveTooltip: false,//是否显示当前页面的tooltip信息 slidesNavigation: true,//是否显示横向幻灯片的导航，默认为false slidesNavPosition: 'bottom',//横向导航的位置，默认为bottom，可以设置为top或bottom //Scrolling css3: true,//是否使用CSS3 transforms来实现滚动效果，默认为true scrollingSpeed: 700,//设置滚动速度，单位毫秒，默认700 autoScrolling: true,//是否使用插件的滚动方式，默认为true,若为false则会出现浏览器自带滚动条 fitToSection: true,//设置是否自适应整个窗口的空间，默认值：true scrollBar: false,//是否包含滚动条，默认为false,若为true浏览器自带滚动条出现 easing: 'easeInOutCubic',//定义页面section滚动的动画方式，若修改此项需引入jquery.easing插件 easingcss3: 'ease',//定义页面section滚动的过渡效果，若修改此项需引入第三方插件 loopBottom: false,//滚动到最低部后是否连续滚动到顶部，默认为false loopTop: false,//滚动到最顶部后是否连续滚动到底部，默认为false loopHorizontal: true,//横向slide幻灯片是否循环滚动，默认为true continuousVertical: false,//是否循环滚动，不兼容loopTop和loopBottom选项 normalScrollElements: '#element1, .element2',//避免自动滚动，滚动时的一些元素，例如百度地图 scrollOverflow: false,//内容超过满屏后是否显示滚动条，true则显示滚动条，若需滚动查看内容还需要jquery.slimscroll插件的配合 touchSensitivity: 15,//在移动设备中滑动页面的敏感性，默认为5最高100，越大越难滑动 normalScrollElementTouchThreshold: 5, //Accessibility keyboardScrolling: true,//是否可以使用键盘方向键导航，默认为true animateAnchor: true,//锚链接是否可以控制滚动动画，默认为true,若为false则锚链接定位失效 recordHistory: true,//是否记录历史，默认为true,浏览器的前进后退可导航。若autoScrolling:false,那么这个属性将被关闭 //Design controlArrows: true,//定义是否通过箭头来控制slide,默认true verticalCentered: true,//定义每一页的内容是否垂直居中，默认true resize : false,//字体是否随窗口缩放而缩放，默认false sectionsColor : ['#ccc', '#fff'],//为每个section设置background-color属性 paddingTop: '3em',设置每一个section顶部的padding,默认为0 paddingBottom: '10px',设置每一个section底部的padding,默认为0 fixedElements: '#header, .footer',固定元素，默认为null,需要配置一个jquery选择器，在页面滚动时，fixElements设置的元素不滚动 responsiveWidth: 0, responsiveHeight: 0, //Custom selectors sectionSelector: '.section',//section选择器。默认为.section slideSelector: '.slide',//slide选择器，默认为.slide //events onLeave: function(index, nextIndex, direction){}, afterLoad: function(anchorLink, index){}, afterRender: function(){}, afterResize: function(){}, afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){}, onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){} });});<ul id="myMenu"> <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li> <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li> <li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li> <li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li></ul>$('#fullpage').fullpage({ anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], menu: '#myMenu'});注意：注意这个自定义的菜单代码应该放置到插件设置的内容外面，避免因为排版不兼容问题可以使用css3:true，否则将被附加到body的插件本身。<script type="text/javascript" src="vendors/jquery.slimscroll.min.js"></script><script type="text/javascript" src="jquery.fullPage.js"></script>touchSensitivity$('#fullpage').fullpage({ sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],});如果设置的参数不对称，比如屏幕个数多余设置的颜色个数，那么多余的屏幕默认没有背景颜色，如果屏幕个数少于设置的颜色个数，那么多余的颜色将不显示。$('#fullpage').fullpage({ onLeave: function(index, nextIndex, direction){ var leavingSection = $(this); //after leaving section 2 if(index == 2 && direction =='down'){ alert("Going to section 3!"); } else if(index == 2 && direction == 'up'){ alert("Going to section 1!"); } }});取消section的滚动$('#fullpage').fullpage({ onLeave: function(index, nextIndex, direction){ //it won't scroll if the destination is the 3rd section if(nextIndex == 3){ return false; } }});afterLoad (anchorLink, index)$('#fullpage').fullpage({ anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], afterLoad: function(anchorLink, index){ var loadedSection = $(this); //using index if(index == 3){ alert("Section 3 ended loading"); } //using anchorLink if(anchorLink == 'secondSlide'){ alert("Section 2 ended loading"); } }});afterRender()$('#fullpage').fullpage({ afterRender: function(){ var pluginContainer = $(this); alert("The resulting DOM structure is ready"); }});afterResize()$('#fullpage').fullpage({ afterResize: function(){ var pluginContainer = $(this); alert("The sections have finished resizing"); }});afterSlideLoad (anchorLink, index, slideAnchor, slideIndex)$('#fullpage').fullpage({ anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex){ var loadedSlide = $(this); //first slide of the second section if(anchorLink == 'secondPage' && slideIndex == 1){ alert("First slide loaded"); } //second slide of the second section (supposing #secondSlide is the //anchor for the second slide if(index == 2 && slideIndex == 'secondSlide'){ alert("Second slide loaded"); } }});onSlideLeave (anchorLink, index, slideIndex, direction, nextSlideIndex)$('#fullpage').fullpage({ onSlideLeave: function( anchorLink, index, slideIndex, direction, nextSlideIndex){ var leavingSlide = $(this); //leaving the first slide of the 2nd Section to the right if(index == 2 && slideIndex == 0 && direction == 'right'){ alert("Leaving the fist slide!!"); } //leaving the 3rd slide of the 2nd Section to the left if(index == 2 && slideIndex == 2 && direction == 'left'){ alert("Going to slide 2! "); } }});取消slide滑动 $.fn.fullpage.moveSectionUp();//向上滚动一页 $.fn.fullpage.moveSectionDown();//向下滚动一页 $.fn.fullpage.moveTo(section,slide);//从1开始，slide从0开始 $.fn.fullpage.silentMoveTo(section,slide);//和moveTo一样，但是没有滚动效果 $.fn.fullpage.moveSlideRight();//幻灯片向右滚动 $.fn.fullpage.moveSlideLeft();//幻灯片向左滚动 $.fn.fullpage.setAutoScrolling(boolean);//动态设置autoScrolling $.fn.fullpage.setLockAnchors(boolean);//动态设置lockAnchors $.fn.fullpage.setRecordHistory(boolean);//动态设置recordHistory $.fn.fullpage.setScrollingSpeed(milliseconds);//动态设置scrollingSpeed $.fn.fullpage.destory(type);//销毁fullpage,type可以不写或者使用all $.fn.fullpage.reBuild();/重新更新页面和尺寸，用于ajax请求改变页面结构后重建效果moveSectionUp()/*Scrolling to the section with the anchor link `firstSlide` and to the 2nd Slide */$.fn.fullpage.moveTo('firstSlide', 2); //Scrolling to the 3rd section in the site$.fn.fullpage.moveTo(3, 0); //Which is the same as$.fn.fullpage.moveTo(3);silentMoveTo(section, slide)/*Scrolling to the section with the anchor link `firstSlide` and to the 2nd Slide */$.fn.fullpage.silentMoveTo('firstSlide', 2);moveSlideRight()$.fn.fullpage.moveSlideRight();moveSlideLeft()$.fn.fullpage.moveSlideLeft();setAutoScrolling(boolean)$.fn.fullpage.setAutoScrolling(false);setFitToSection(boolean)$.fn.fullpage.setFitToSection(false);setLockAnchors(boolean)$.fn.fullpage.setLockAnchors(false);setAllowScrolling(boolean, [directions])//disabling scrolling$.fn.fullpage.setAllowScrolling(false); //disabling scrolling down$.fn.fullpage.setAllowScrolling(false, 'down'); //disabling scrolling down and right$.fn.fullpage.setAllowScrolling(false, 'down, right');setKeyboardScrolling(boolean, [directions])//disabling all keyboard scrolling$.fn.fullpage.setKeyboardScrolling(false); //disabling keyboard scrolling down$.fn.fullpage.setKeyboardScrolling(false, 'down'); //disabling keyboard scrolling down and right$.fn.fullpage.setKeyboardScrolling(false, 'down, right');setRecordHistory(boolean)$.fn.fullpage.setRecordHistory(false);setScrollingSpeed(milliseconds)$.fn.fullpage.setScrollingSpeed(700);destroy(type)//destroy any plugin event (scrolls, hashchange in the URL...)$.fn.fullpage.destroy(); //destroy any plugin event and any plugin modification done over your original HTML markup.$.fn.fullpage.destroy('all');reBuild()$.fn.fullpage.reBuild();<img data-src="image.png"><video> <source data-src="video.webm" type="video/webm" /> <source data-src="video.mp4" type="video/mp4" /></video>关键词：滚动
