plugin插件

Posted 2020-10-07

plugin插件

1fullpage

<script type="text/javascript">
    $(function(){
        /*
        组建好网页布局后，必须选中包裹所有section的div的id，并调用fullpage()方法，才能加载布局。
        调用fullpage()方法后，可以给函数传入对象类型的参数，设置fullpage的各种属性。
        */
       $(‘#fullpage‘).fullpage({
           /*内容是否垂直居中？默认为true*/
           /*verticalCentered : flase,*/
           
           
           /*字体是否随窗体缩放，默认为flase*/
        /*resize:true,*/
           
           /*设置每一屛的背景色*/
           /*sectionsColors:["#FF0000","#00FF00","#0000FF"],*/
           
           
           /*设置每一屛的锚点*/
        anchors:["page1","page2","page3","page4"],
           
           /*设置单页滚动速度，默认700毫秒*/
        scrollingSpeed : 300,
           
           
           /*设置滚动动画方式
            jQuery只支持几种动画,更多动画效果需要导入jquery.easings.min.js
            */
        /*easing : "easeInQuart",*/
           
           /*绑定一个菜单，详见html5*/
           menu : "#menu",
           
           /*是否显示导航小圆点*/
           navigation : true,
           /*设置导航圆点的位置，可选值left和right，默认值right*/
        /*navigationPosition : "left",*/
       
           /*设置鼠标指上时，小圆点的提示文字*/
           navigationTooltips:["第一页","第二页","第三页"],
           
           /*设置幻灯片的导航*/
           //slidesNavigation:true,
           //slidesNavPosition:"top",
           
           /*设置幻灯片左右切换箭头的背景色*/
           controlArrowColor:"RGBA(0,0,0,0.5)",
           
           /*最后一页下滑，是否滚回首页*/
           //loopBottom:true,
           
           /*第一页上滑，是否可以滚动尾页*/
           //loopTop:true,
           
           
           /*是否可以循环滚动：与上面两个属性不兼容，只能选其一*/
           //continuousVertical:true,
       
           /*设置幻灯片是否水平循环，默认true*/
           //loopHorizontal:false,
           
           /*是否使用插件的滚动翻页方式，设置为false，将使用浏览器默认的滚动条*/
           //autoScrolling:false,
           
           
           /*设置内容超出满屏区域后，是否显示滚动条。必须要导入scrolloverflow.js才能使用*/
           //scrollOverflow:true,
           
           /*是否使用css3动画滚动。默认false，表示使用jQuery动画滚动*/
           //css3:true,
           
           /*单页上下方的padding*/
           //paddingTop:"40px",
           //paddingBottom:"40px",
           
           /*是否使用键盘方向键导航，默认true*/
           //keyboardScrolling:false,
           
           /*手机滑屏的力度，数值越大，越难翻页*/
           //touchSensitivity:5,
           
           
           /*浏览器直接打开指定锚点时，是否以动画显示，默认为true*/
           //animateAnchor:false,
           
           
           
           
           /*
            afterLoad:当一个页面，加载完成之后触发；
            anchorLink：当前页面的锚点名；
            index：当前页面的序号，从1开始；
            */
           afterLoad:function(anchorLink,index){
               //console.log(anchorLink);
               //console.log(index);
           },
           
           
           /*onLeave：当页面即将滚动离开的时候触发
            index：当前所在页面的序号
            nextindex：即将去往页面的序号
            direction：离开的方向，up或down
           */
           onLeave:function(index,nextindex,direction){
               //console.log(index);
               //console.log(nextindex);
               //console.log(direction);
           },
           
           
           /*afterRender:页面初次完成初始化的时候，执行一次
                                    先执行第一个页面的afterLoad再执行afterRender
           */
           afterRender:function(){
               //console.log("=====afterRender=====");
           },
           
           /*
           当幻灯片加载完成时，执行的函数
           anchorLink：幻灯片所在section的锚点
           index：幻灯片所在的section的序号
           slideAnchor：幻灯片自身的锚点（如果有的话。如果没有，显示slideIndex）
           slideIndex：幻灯片自身的序号（从0开始）
           */
           afterSlideLoad:function(anchorLink,index,slideAnchor,slideIndex){
//             console.log(anchorLink);
//             console.log(index);
//             console.log(slideAnchor);
//             console.log(slideIndex);
           },
           /*
           onSlideLeave；当幻灯片离开去另一张幻灯片时触发
           anchorLink,当前幻灯片所在section的锚点
           index,当前幻灯片所在section的序号，从1开始
           slideIndex,当前幻灯片自身的序号，从0开始
           direction,幻灯片移动的方向，left和right
           nextslideIndex，即将显示的幻灯片的序号，从0开始
           */
           onSlideLeave:function(anchorLink,index,slideIndex,direction,nextslideIndex){
//             console.log(anchorLink);
//             console.log(index);
//             console.log(slideIndex);
//             console.log(direction);
//             console.log(nextslideIndex);
           },
 
       });
    });
    
    
</script>

 

2move

<script type="text/javascript">
            document.getElementById("btn1").onclick = function(){
                move("#div1")
                //.set("margin-left","100px")//设置css相关属性
                //.set("margin-top","100px")
                //.set("width","200px")
                .add("width",50)//将数值类型的属性，在原有基础上加一个数
                //.rotate(90)//设置旋转角度
                .duration("1s")//设置动画完成时间
                //.translate(200,400)//设置平移
                //.skew(30,40)//设置x轴，y轴的旋转角度
                //.scale(2,2)//设置缩放
                .end()
                //.then()//利用duration和delay也能实现then函数。
                .x(200)//设置x轴位置
                .y(200)//设置y轴位置
                //.ease()//动画效果
                .delay(1000)//动画延时多少毫秒之后开始执行
                .end(function(){
                    /*
                    move.js要使动画生效，必须使用.end()结尾。
                    .end()传入一个函数，表示动画结束后执行的回调函数
                    */
                    //alert("动画结束");
                });
            }
      
        </script>

 

3validation.html1

<script type="text/javascript">
        $(function(){
            $("#commentForm").validate({
                //rules对象，用于声明各个input的验证规则
                rules:{
                    //选择每个input时，需选中input的name，并对应一个对象设置多条验证
                    name:{
                        required:true,
                        minlength:2
                    },
                    email:{
                        required:true,
                        email:true
                    },
                    url:{
                        url:true
                    },
                    reurl:{
                        equalTo:"#url"
                    },
                    comment:{
                        required:true,
                    },
                    
                },
                //messages对象，用于显示各个input验证不通过时的提示文字，
                //message对应每个规则都会有默认的提示文字，如非特殊需要，无需单独设置。
                messages:{
                    name:{
                        required:"这个内容你必须填",
                        minlength:"这里最少输入两个字符"
                    },
                },
            });
        });
    </script>