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

时间:2021-10-01 15:38:10
使用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;
                });