fullpage的使用以及less, Sass的属性和JQuery自定义插件的声明和使用

使用fullpage的步骤

 

1 导入JQuery.js fullpage,js fullpage.css

2 组建网页布局，最外层id="fullpage" 单页class="section" 幻灯片 class="slide"

3js中使用$("#fullpage").fullpage();调用执行

 

$(function(){}

添加完单页后，虚调用.fullpage

 

$("#fullpage").fullpage({

内容是否垂直居中 默认为true

verticalCentered:false,

 

字体是否随窗口缩放而缩放 默认为false

resize:true,

 

设置每个单页的背景色

sectionsColor:["#254875","#00FF00","#254587","#695684"],

 

设置每个单页的锚链接

anchors: ['page1', 'page2', 'page3', 'page4'],

 

设置单页滚动速度 默认为700 单位ms

scrollingSpeed:7000,

 

绑定一个分页导航菜单的ID 导航详情见HTML

menu:"#menu",

 

是否显示项目导航

navigation:true,

 

 

导航位置 可选left或 right

navigationPosition:"left",

 

 

navigationColor:"#BCBCBC",

 

 

 

鼠标指上时，导航提示的信息

navigationTooltips:["page1","page2","page3","page4"],

 

是否显示幻灯片导航

slidesNavigation:true,

slidesNavPosition:"top",

 

左右滑块的箭头的背景颜色

controlArrowColor:"#BCBCBC",

 

滚动到最底部后是否滚回顶部 默认为false

loopBottom:true,

 

 

首页上划 是否滚回尾页 默认为false

loopTop:true,

 

/*设置幻灯片是否水平循环 默认为true*/

//loopHorizontal:true,

 

是否循环滚动 注意与上两个的区别

continuousVertical:true,

 

是否使用浏览器默认滚动条滚动

autoScrolling:true,

 

 

当页面内容超出区是否显示滚动条

必须导入scrollOverflow.js且要在fullpage.js之前导入

 

scrollOverflow:true,

 

是否使用CSS3的滚动方式，默认为true false时用JQuery的滚动方式

css3:false,

 

 

 

单页上下方的padding属性

paddingTop:"30px",

paddingBottom:"30px",

 

 

是否使用键盘方向键导航 默认为true

keyboardScrolling:true,

 

手机端划屏力度 数值越大，越难滑动

touchSensitivity:10,

 

 

使用锚链接跳转页面时，是否进行动画滚动

animateAnchor:true,

 

使用锚链接跳转页面时，是否进行动画滚动

animateAnchor:false

 

afterLoad: function(anchorLink, index){

console.log("-----------afterLoad---------")

console.log("anchorLink"+anchorLink);

console.log("index"+index);

console.log($(this))

if(index==3){

//move("#p").set('margin-left', 500).end();

}

},

 

onLeave: function(index, nextIndex, direction){

console.log("-----------onLeave---------")

console.log("index"+index);

console.log("nextIndex"+nextIndex);

console.log("direction"+direction);

},

 

页面加载完执行，先执行第一页的afterLoad,再执行本方法

afterRender:function(){

console.log("-----------afterRender---------")

},

 

afterSlideLoad:function(anchorLink,index,slideAnchor,slideIndex){

console.log("-----------afterSlideLoad---------")

console.log("anchorLink："+anchorLink);

console.log("index："+index);

console.log("slideIndex："+slideIndex);

console.log("slideAnchor："+slideAnchor);

},

 

onSlideLeave:function(anchorLink,index,slideIndex,direction,nextSlideIndex){

console.log("-----------afterSlideLoad---------")

console.log("anchorLink："+anchorLink);

console.log("index："+index);

console.log("slideIndex："+slideIndex);

console.log("direction："+direction);

console.log("nextSlideIndex："+nextSlideIndex);

},

 

 

 

 

 

 

});

 

fullpage常用方法

 

1 $.fn.fullpage.moveSectionUp() 上滚一页

2 $.fn.fullpage.moveSectionDown() 下滚一页

3 moveTo(section, slide) 滚动到指定页 section从1开始 slide从0开始

moveSlideRight() slide 向右滚动

moveSlideLeft() slide 向左滚动

setAutoScrolling() 设置页面滚动方式，设置为 true 时自动滚动

setAllowScrolling() 添加或删除鼠标滚轮/触控板控制

setKeyboardScrolling() 添加或删除键盘方向键控制

setScrollingSpeed() 定义以毫秒为单位的滚动速度

});

 

 

 

// Less中的注释，但这种不会被编译

 

/*这也是Less中的注释，但是会被编译

*/

[Less中的变量]

 

1 声明变量：@变量名：变量值

使用变量：@变量名；

>>>Less中的变量的类型

① 数字 1 10px ② 字符串；无引号字符串red 有引号字符串"haha"

②颜色类，red #000000 rgb() ③ 值列表类型，用逗号或空格分隔 10px solid red

>>>变量使用原则

多次频繁出现的值 需要修改的值 设为变量

@width:100px;

@length:100px;

@color:green;

#div1{

width: @length;

height: @length;

s

}

 

2 混合(Mixins)

① 无参混合： 声明： .name{} 选择器中调用：.name;

② 带参混合

无默认值声明： .name(@param){} 调用 .name(parValue)

有默认值声明： .name(@param：parValue){} 调用 .name(parValue)：parValue可省略

>>>如果声明时：如果没有默认值，则调用时必须赋值，否则报错

>>>无参混合：会在css中编译除同名的class选择器，有参的不会。

.borderRadius(@brWidth:10px){

border-radius: @brWidth;

-webkit-border-radius: @brWidth;

-moz-border-radius: @brWidth;

 

}

#div1{

.borderRadius(20px);

width: @length;

height: @length;

 

}

.borderRadius(@brWidth){

border-radius: @brWidth;

-webkit-border-radius: @brWidth;

-moz-border-radius: @brWidth;

 

}

.borderRadius{

border-radius:10px;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

 

}

3 Less的匹配模式：

使用混合进行匹配，类似于if结构；

声明：.name(条件一,参数){}；.name(条件二,参数){}；.name(条件三,参数){}；.name(@_,参数){}；

调用：.name(条件值,参数值)；

匹配规则： 根据调用时提供的条件值，去寻找与之匹配的"Mixins"执行。其中@_表示永远需要执行的部分。

@width:100px;

 

.setMargin(lefts,@width){

margin-left:@width ;

}

.setMargin(rights,@width){

margin-right:@width ;

}

.setMargin(tops,@width){

margin-top:@width ;

}

 

.setMargin(bottoms,@width){

margin-bottom:@width ;

}

 

.setMargin(@_,@width){

padding: 10px;

}

 

#div1{

.setMargin(lefts,10px);

.setMargin(rights,10px);

.setMargin(tops,10px);

.setMargin(bottoms,10px);

width: @length;

height: @length;

 

}

4 Less中的运算

+ - * / 可带单位，可不带单位

颜色运算时。红绿蓝分三组进行计算，组内可进位，组间互不干扰

 

 

LESS中的嵌套，保留HTML中的代码结构

1 嵌套默认是后代选择器，如果需要子带选择器，则在子代前面加>

2 & 表示上一层 &:hover{} 表示上一层的hover事件 ul{ li { &:hover{"ul li:hover" } } }

 

section{

>p{

color: red;

 

text-align: center;

}

ul{

padding: 0px;

list-style: none;

li{

float: left;

margin: 10px;

width: 100px;

text-align: center;

border: @border;

&:hover{

 

}

}

}

}

//注释一 不会被编译

 

/*

注释二 非压缩模式会被编译

*

*/

 

/*!

* 注释三 重要注释，压缩模式也会被编译

*

 

 

1 Sass中的变量：

使用$变量名，变量值，声明变量

如果变量需要在字符串中嵌套，则需要用井 {}包裹

border-井{$left}:10px solid blue;

$length:100px;

$length:200px;

$left:left;

$width:200px;

$color:red;

#div1{

width: $length;

height: $length;

border-#{$left}:10px solid blue;

}

2 Sass中的运算，会将单位也进行计算 使用时需注意最终单位

 

 

3 Sass中的嵌套：选择器嵌套，伪类嵌套，属性嵌套

选择器嵌套 ul{li{}} 后代

选择器嵌套ul{>li{}} 子代

&：表示上一层 div{ul{li{&="div ul li"}}};

属性嵌套：属性名与{之间必须有： 例如border:{color:red};

伪类嵌套：ul{ li { &:hover{"ul li:hover" } } }

 

section{

p{

color: red;

 

@include hong(200px);

@include hongs(brown);

}

ul{

padding: 0px;

list-style: none;

>li{

float: left;

width: 100px;

margin: 100px;

border: {

color: red;

style:solid;

width: 10px;

}

&:hover{

 

}

}

}

}

 

4 混合宏 继承 占位符

① 混合宏 声明：@mixin name($param:value){}；

调用：@include name(value);

>>>声明时，可以有参，可以无参，可带默认值，也可不带默认值，但是，调用时，必须符合声明规范同less

>>>优点：可以传参，不会生成同名的class选择器

>>>缺点：会将混合宏中代码，copy到对应的选择器中，产生冗余代码

$length:100px;

$length:200px;

$left:left;

$width:200px;

$color:red;

@mixin hong($width){

width: $width;

}

@mixin hongs($color:yellow){

color: $color;

}

@mixin borderRadius($param1...){

//使用...将传进来的所有参数，接受到一个变量中

border-radius: $param1;

-webkit-border-radius: $param1;

 

}

#div1{

width: func($length);

height: $length;

@include hong(1000px);

@include hongs(yellowgreen);

}

② 继承： 声明：.class{} 调用: @extend .class;

优点：继承的相同代码，会提取出并集选择器中，减少冗余代码

缺点：无法传参； 会在css中生成一个同名class

.class{

padding: 0px;

}

#div1{

width:$lengt);

height: $length;

@extend.class;}

③占位符： 声明：%class{} 调用： @extend %class

优点：继承的相同代码，会提取出并集选择器中，不会生成同名的class选择器

缺点：无法进行传参；

综上所述：当需要传递参数时，用混合宏，当有现成class时，用继承，当不需要传参，也不需要class时，用占位符。

%class{

padding: 0px;

}

#div1{

width:$lengt);

height: $length;

@extend %class;}

 

5 if条件结构

@if 条件 {}；

@else 条件 {};

@if 2<1{

 

}

@else{

 

@if 2>0{

color: yellow;

};

}

 

6 for循环结构

@for $i from 1 to 10{} 不含10;

@for $i from 1 through 10{}; 包含 10;

@for $i from 1 through 10{

.bor井{$i}{

border:井{$i}px solid red;

}

}

@for $i from 1 through 10{

.bor#{$i}{

border:#{$i}px solid red;

}

}

 

 

7 while循环结构

$j:1;

@while $j<10{

.while井{$j}{

border: 井{$j}px solid red;

}

$j:$j+1;

}

 

$j:1;

@while $j<10{

.while#{$j}{

border: #{$j}px solid red;

}

$j:$j+1;

}

 

8 each循环遍历

@each item in a,b,c,d{

//item表示每一项

}

 

 

 

9 函数

@function func($length){

$length1:$length*5;

@return $length1;

}

 

调用：func(10px);

@function func($length){

$length1:$length*5;

@return $length1;

}

#div1{

width: func($length);

height: $length;

 

border-#{$left}:10px solid blue;

}

 

JQuery自定义插件
            
            1、全局插件声明
                    $.extend({
                       func:function(){}    
                  })
                    $.func();
            
            $.extend({
                sayHello:function(){
                    console.log("Hello JQuery!");
                },
                setBodyBg:function(color){
                   $("div").css("background-color",color);
                }
           })
            $.setBodyBg("red");
            
            2、局部插件声明
                    $.fn.myFunc = function(){};
                    调用:$("选择器").myFunc();
            
            2.1 传入单一参数
            $.fn.setBg = function(bgColor){
                //console.log("调用setRedBg插件");
                console.log(this); //    JQuery对象
                console.log(document.getElementsByTagName("div")[0]);    //DOM对象
               
                //在当前函数中，this指向：调用此插件的对象，且当前this为JQuery对象
                this.css("background-color",bgColor);
            }
            $("div").setBg("#FE9812");
            
            2.2 传入对象参数并提供默认值
         $.fn.setFont = function(options){
               var defaults = {设置默认值
                    "font-size":"12px",
                    "font-weight":"700",
                    "font-family":"'宋体'",
                   "color":"#ef9982"
               };
                var fontStyles = $.extend(true,defaults,options);//将默认值与传入对象比对，获得新对象(传入对象有值，就用传入的值，若无则用默认值)
               return this.css(fontStyles);//修改css
                return作用：将当前调用插件的对象返回。可以保持JQuery的样式调用规则
            }
            $("div").setFont({
             "font-size":"48px",
               "color":"#ff00ff",
                "font-weight":"400",
                "font-family":"'微软雅黑'"
            }).fadeOut(1000);
            
            $.fn.setDivText = function(attr){
                console.log(attr.length);
               console.log(this.length);
                if(attr.length!=this.length){
                    alert("传入数组个数与所选div个数不一致");
                    return this;
                }
               $.each(this, function(index,item) {
                    item.innerHTML = attr[index];//item是DOM对象，需调用原生DOM的属性方法，或转为JQuery对象后，在使用JQuery相关方法 $(item).html(attr[index]);
                    
                    return this;
                });