-
fullpage查看全部
-
jquery的插件--查看全部
-
move.js查看全部
-
xioagui查看全部
-
pullpage配置项查看全部
-
1.判断索引值滚动到某一section，且滚动结束后触发动画效果 2.使用move.js来实现动画效果查看全部
-
接前面查看全部
-
我最喜欢这个地方查看全部
-
重点！！查看全部
-
fullpage方法的使用： $.fn.fullpage.方法名称() 例如$.fn.fullpage.moveSectionUp() 方法： 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-就可调用)查看全部
-
配置项： recordHistory： ，是否记录浏览历史，默认为true，可以记录页面滚动的历史，可以通过浏览器的前进后退来导航，如果设置了autoScrolling：false，则这个属性也被关闭； menu：'#ul的ID名' (在这之前要先设置一个<ul id=""><li data-menuanchor="page1"><a href="#page1">section1</a></li></ul> ps:data-menuanchor以及href的值都是与锚链接相对应的) [拓展：可以配合ul>li>a制作定制版导航] 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查看全部
-
还可以添加配置项： 在fullpage（{ sectionsColor:['','','',''],//分别为各个section设置背景颜色 controlArrows： ，默认为true，定义是否通过箭头来控制slide vertical： ，默认为true，每一页的内容是否垂直居中； resize： ，默认为false，字体是否随着窗口缩放而缩放； scrollingSpeed： ，滚动速度，单位为毫秒，默认为700； anchors：['page1','','',''],定义锚链接，使每个section在地址栏有不同地址，便于直接找到某一section lockAnchors: ,默认为false，若为true，则所添加的anchors不会自动在地址栏生效，需手动在地址栏地址后面加上自己的命名 }）；查看全部
-
激活fullpage效果 <script type="text/javascript"> $(document).ready(function(){ $("#fullpage").fullpage(); }); </script>查看全部
-
slimscroll查看全部
-
continuousVertiacl:page间循环滚动查看全部
举报
0/150
提交
取消