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;
});
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;
});
