plugin插件
| 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>
