zoukankan      html  css  js  c++  java
  • JQuary中的FullPage属性的用法

    $(document).ready(function(){


        //常用方法
        //$.fn.fullpage.moveSectionUp()   //向上滚动一页


        //$.fn.fullpage.moveSectionDown()   //向下滚动一页


        //$.fn.fullpage.moveTo(section,slide)     //滚动到第几页的第几个幻灯片,注意:页面从1开始,幻灯片从0开始


        //$.fn.fullpage.silentMoveTo(section,slide)  //滚动到第几页的第几个幻灯片,但是没有动画效果,注意:页面从1开始,幻灯片从0开始


        //$.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.setAllowScrolling(boolean,[directions])  //添加或删除鼠标滚轮、滑动控制,第一个参数true/false为启用/禁用
                  //后面的参数为方向,取值包括all,up,down,left,right,可以使用多个,逗号分隔




        // $.fn.fullpage.destroy('type')//销毁fullpage特效,type可以不写。或者使用all。不写type,fullpage给页面添加的样式和html元素还在
         //如果使用all,则样式html等全部销毁,页面恢复和不使用fullpage相同的效果




        // $.fn.fullpage.reBulid()//重新更新页面和尺寸,用于通过ajax请求后改变了页面结构之后,重建效果






        //页面中添加图片或者视频的时候,只需要使用data-src代替src<img data-src="aa.jpg">






    $('#fullpage').fullpage(
            {
                sectionsColor:['red','yellow','#ccc','black'], //设置页面背景颜色


                //controlArrows:false//设置幻灯片是否使用箭头来切换,false适用于手机用户滑动使用
                 //controlArrowColor:'#ccc'//左右箭头的背景颜色


                verticalCentered:true,//设置每一页的内容是否垂直居中,默认为true


                resize:true,//字体是否随窗口缩放而缩放,默认为false


                scrollingSpeed:700,//设置鼠标滚动速度,默认为700


                anchors:['page1','page2','page3','page4'],/*定义锚链接,默认为[]。有了锚链接,用户可以快速打开定位到某一页面。注意定义锚链接时
                                            值不要和页面中的任意的id或name相同,尤其是在IE浏览器下。定义时不需要加#*/




                lockAnchors:false,/*是否锁定锚链接,默认为false。如果设置为true,那么定义的锚链接,也就是anchors属性则没有效果。使用较少。*/




                //easing:sessionStorage,//定义页面section滚动动画的方式,默认为easeInOutCubic,如果修改此项,需要引入iquery.easings插件,或者jQuery ui。




                css3:true,/*是否使用CSS3 transforms来实现滚动效果,默认为true。这个配置项可以提高支持css3的浏览器,比如移动设备等的速度
                             ,如果浏览器不支持css3,则会使用jQuery来代替css3实现滚动效果。*/




               // loopTop:false,//滚动到最顶部后是否连续滚动到底部,默认为false。


                //loopBottom:false,//滚动到最底部后是否连续滚动回顶部,默认为false,


                loopHorizontal:false,//横向slider幻灯片是否循环滚动,默认为true,


                autoScrolling:true,/*默认为true,如果选择false,则会出现浏览器自带的滚动条,将不会按页滚动
                                        而是按照滚动条的默认行为来滚动*/




                scrollBar:false,/*是否包含滚动条,默认为false,如果在设置为true,则浏览器自带的滚动条出现,页面滚动时还是按页滚动
                                但是滚动条的默认行为也有效*/




                paddingTop:'10px',//设置每一个section顶部的padding,默认为0.如果需要设置一个固定在顶部或者底部的菜单,导航,元素等,可以使用。


                paddingBottom:'10px',//设置每一个section底部的padding,默认为0.如果需要设置一个固定在顶部或者底部的菜单,导航,元素等,可以使用。


                fixedElements:'#header',//固定的元素,需要配置一个jquery选择器,在页面滚动的时候fixedElements设置的元素固定不动。


                keyboardScrolling:false,//是否可以使用键盘方向键导航,默认为true


                touchSensitivity:5,//在移动设备中滑动页面的敏感性,默认为5,是按百分比来衡量,最高为100,越大则越难滑动。


                continuousVertical:true,/*是否循环滚动,默认为false。如果设置为true,则页面会滚动,而不像looptop或loopbottom
                                            那样出现跳动,注意这个属性和looptop、loopbottom不兼容,不能同时设置*/




                animateAnchor:true,//锚链接时否可以控制滚动动画,默认为true。如果设置为false,则通过锚链接定位到某个页面显示不在有动画效果。




                recordHistory:true,/*是否记录历史,默认为true,可以记录页面滚动的历史,通过浏览器的前进后退来导航。注意
                                       如果设置autoScrolling:false,那么这个配置也将被关闭,即设置为false。*/




                menu:'#fullpageMenu',//绑定菜单,设置相关属性与anchor的值对应后,菜单可以控制滚动,默认为false。可以设置为菜单的jquery的选择器


                navigation:true,//是否显示导航,默认为false。如果设置为true,则会显示小圆点,作为导航


                navigationPosition:'right',//设置小圆点的位置,可以设置为left或者right


               navigationTooltips:['第一页','第二页','第三页','第四页'],//导航小圆点的tooltips设置,也就是指向小圆点时的提示,默认为[],注意按照顺序设置


                showActiveTooltip:false,//是否显示当前页面的导航的tooltip信息,无需鼠标指向小圆点,默认为false


                slidesNavigation:true,//是否显示横向幻灯片的导航,也就是是否显示幻灯片的小圆点,默认为false。


                slidesNavPosition:'top',//横向幻灯片导航(小圆点)的位置,默认为bottom,可以设置为top或者是bottom。




                scrollOverflow:false,/*内容超过满屏后是否显示滚动条,默认为false,如果设置为true,则会显示滚动条
                                       ,如果要滚动查看内容,还需要引用jquery.slimscroll插件的配合,slimscroll插件主要用于模拟传统的浏览器滚动条*/




                sectionSelector:'.fp-section',//section的选择器,默认为.section


                slideSelector:'.fp-slide'//slide的选择器,默认为.slide。


            }
    );
    });

  • 相关阅读:
    CSS框模型,浮动,定位以及其他属性
    CSS基础知识点总结
    Html基础知识点
    CentOS7桌面版系统使用的一些小技巧
    win 执行puppet
    常用脚本总结
    Ansible小记
    Tampermonkey-让百度云下载飞起来
    安装zabbix 遇到的一些问题
    alias
  • 原文地址:https://www.cnblogs.com/windy-xmwh/p/8279644.html
Copyright © 2011-2022 走看看