ES6中的字符串模版

先来看一个在ES5下我们的字符串拼接案例:

<script>
let name='OSganping';
let blog = '非常高兴你能看到这篇文章,我是你的小伙伴'+name+'。这节课我们学习字符串模版。';
document.write(blog);
</script>

ES5下必须用+name+这样的形式进行拼接,这样很麻烦而且很容易出错。ES6新增了字符串模版,可以很好的解决这个问题。字符串模版不再使用‘xxx’这样的单引号,而是换成了xxx这种形式,也叫连接号。这时我们再引用name变量就需要用${name}这种形式了,我们对上边的代码进行改造。

<script>
let name='OSganping';
let blog = `非常高兴你能看到这篇文章,我是你的小伙伴${name}。这节课我们学习字符串模版。`;
document.write(blog);
</script>

可以看到浏览器出现了和上边代码一样的结果。而且这里边支持html标签,可以试着输入一些。

<script>
let name='OSganping';
let blog = `非常高兴<span>2333内联元素</span>你能看到这篇文章<h2>2333块级元素</h2>,我是你的小伙伴${name}。这节课我们学习字符串模版。`;
document.write(blog);
</script>

对运算的支持

let a=1;
let b=2;
let result=`${a+b}`;
document.write(result);

强大的字符串模版,在实际开发中,我们可以让后台写一个活动页面,然后轻松的输出给用户。

字符串查找

ES6还增加了字符串的查找功能,而且支持中文哦,小伙伴是不是很兴奋。还是拿上边的文字作例子,进行操作。

查找是否存在:

先来看一下ES5的写法,其实这种方法并不实用,给我们的索引位置,我们自己还要确定位置。

<script>
let name='OSganping';
let blog = '非常高兴你能看到这篇文章,我是你的小伙伴OSganping';
document.write(blog.indexOf(name));
</script>

这时网页中输出了20,我们还要自己判断。

ES6直接用includes就可以判断,不再返回索引值,这样的结果我们更喜欢,更直接。

<script>
let name='OSganping';
let blog = '非常高兴你能看到这篇文章,我是你的小伙伴OSganping。';
document.write(blog.includes(name));
// 输出true
</script>
判断开头是否存在:
blog.startsWith(name);
判断结尾是否存在:
blog.endsWith(name);

需要注意的是:starts和ends 后边都要加s

复制字符串

我们有时候是需要字符串重复的,比如分隔符和特殊符号,这时候复制字符串就派上用场了,语法很简单。

document.write('OSganping|'.repeat(3));

当然ES6对字符串还有一些其它操作,因为实际工作中不太使用,这里就不作太多的介绍了。希望你能动手练习一下,并把这些新特性应用到工作中,否则可能很快就忘记了。

(完)

分享到

ES中的扩展运算符和rest运算符

对象扩展运算符

当编写一个方法时,我们允许它传入的参数是不确定的。这时候可以使用对象扩展运算符来作参数,看一个简单的列子:

<script>
function test(...args){
console.log(args[0]);
console.log(args[1]);
console.log(args[2]);
console.log(args[3]);
}
test(1,2,3);
</script>

这时我们看到控制台输出了 1,2,3,undefined,这说明是可以传入多个值,并且就算方法中引用多了也不会报错。

扩展运算符的用处:

我们先用一个例子说明,我们声明两个数组arr1和arr2,然后我们把arr1赋值给arr2,然后我们改变arr2的值,你会发现arr1的值也改变了,因为我们这是对内存堆栈的引用,而不是真正的赋值。

<script>
let arr1=['OSganping','github','io'];
let arr2=arr1;
console.log(arr2);
arr2.push('HelloWorld');
console.log(arr1);
</script>

控制台输出:

image
这是我们不想看到的,可以利用对象扩展运算符简单的解决这个问题,现在我们对代码进行改造。

<script>
let arr1=['OSganping','github','io'];
//let arr2=arr1;
let arr2=[...arr1];
console.log(arr2);
arr2.push('HelloWorld');
console.log(arr2);
console.log(arr1);
</script>

现在控制台预览时,你可以看到我们的arr1并没有改变,简单的扩展运算符就解决了这个问题。

rest运算符

如果你已经很好的掌握了对象扩展运算符,那么理解rest运算符并不困难,它们有很多相似之处,甚至很多时候你不用特意去区分。它也用…(三个点)来表示,我们先来看一个例子。

function OSganping(first,...arg){
console.log(arg.length);
}
OSganping(0,1,2,3,4,5,6,7);

这时候控制台打印出了7,说明我们arg里有7个数组元素,这就是rest运算符的最简单用法。

如何循环输出rest运算符呢?

这里我们用for…of循环来进行打印出arg的值,我们这里只是简单使用一下,以后我们会专门讲解for…of循环。

function OSganping(first,...arg){
for(let val of arg){
console.log(val);
}
}
OSganping(0,1,2,3,4,5,6,7);

for…of的循环可以避免我们开拓内存空间,增加代码运行效率,所以建议大家在以后的工作中使用for…of循环。有的小伙伴会说了,反正最后要转换成ES5,没有什么差别,但是至少从代码量上我们少打了一些单词,这就是开发效率的提高。

总结:我们这里学习了对象扩展运算符和reet运算符,它们两个还是非常类似的,但是你要自己很好的区分,这样才能在工作中运用自如。

(完)

分享到

ES6中新的声明方式与变量的结构赋值

1. 新的声明方式

let

首先我们看这一段代码

var a=2;
{
let a=3;
}
console.log(a);

控制台里打印出来的值是2。如果我们只在区块里声明,不再外部声明,我们打印a时就会报错,显示找不到变量。

{
let a=3;
}
console.log(a);

上面两个例子说明了let是局部变量声明,let声明只在区块内起作用,外部是不可以调用的。

有些刚接触JavaScript的小伙伴会疑惑了,我感觉let还没有var好用,其实let是防止你的数据污染的,在大型项目中是非常有用处的。现在看一个循环的例子,我们来看一下let的好处。

用var声明的循环
for(var i=0;i<10;i++){
console.log('循环体中:'+i);
}
console.log('循环体外:'+i);

你会发现循环体外的i变量被污染了,如果在外部再使用i时就会出现问题,这是开发者不想看到的。我们再利用let声明,就可以解决这个问题。

用let声明的循环
for(let i=0;i<10;i++){
console.log('循环体中:'+i);
}
console.log('循环体外:'+i);

这时候控制台会报错 !

const声明常量

在程序开发中,有些变量是希望声明后在业务层就不再发生变化了,简单来说就是从声明开始,这个变量始终不变,就需要用const进行声明。

我们来一段用const声明错误的代码,在错误中学习const的特性也是非常好的。

const a="hello";
var a='world';
console.log(a);

编译时, 控制台提示, 意思是说已经有一个变量a了,不能继续声明

Identifier 'a' has already been declared

2.变量的解构赋值

ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。解构赋值在实际开发中可以大量减少我们的代码量,并且让我们的程序结构更清晰。

数组模式和赋值模式统一:

简单的数组解构:

以前,为变量赋值,我们只能直接指定值。比如下面的代码:

let a=0;
let b=1;
let c=2;

而现在我们可以用数组解构的方式来进行赋值。

let [a,b,c]=[1,2,3];

上面的代码表示,可以从数组中提取值,按照位置的对象关系对变量赋值。

数组模式和赋值模式统一:

可以简单的理解为等号左边和等号右边的形式要统一,如果不统一解构将失败。

let [a,[b,c],d]=[1,[2,3],4];

如果等号两边形式不一样,很可能获得undefined或者直接报错。

解构的默认值:

解构赋值是允许你使用默认值的,先看一个最简单的默认是的例子。

let [foo = true] =[];
console.log(foo); //控制台打印出true

上边的例子数组中只有一个值,可能你会多少有些疑惑,我们就来个多个值的数组,并给他一些默认值。

let [a,b="World"]=['Hello'];
console.log(a); //控制台显示“Hello”
console.log(b); //控制台显示“World”
console.log(a+b); //控制台显示“Hello World”

现在我们对默认值有所了解,需要注意的是undefined和null的区别。

let [a,b="World"]=['Hello',undefined];
console.log(a+b); //控制台显示“HelloWorld”

undefined相当于什么都没有,b是默认值。

let [a,b="World"]=['Hello',null];
console.log(a+b); //控制台显示“Hellonull”

null相当于有值,但值为null。所以b并没有取默认值,而是解构成了null。

对象的解构赋值

解构不仅可以用于数组,还可以用于对象。

let {foo,bar} = {foo:'Hello',bar:'World'};
console.log(foo+bar); //控制台打印出了“HelloWorld”

注意:对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

圆括号的使用

如果在解构之前就定义了变量,这时候你再解构会出现问题。下面是错误的代码,编译会报错。

let foo;
{foo} ={foo:'Hello'};
console.log(foo);

要解决报错,使程序正常,我们这时候只要在解构的语句外边加一个圆括号就可以了。

let foo;
({foo} ={foo:'HelloWorld'});
console.log(foo); //控制台输出HelloWorld

字符串解构

字符串也可以解构,这是因为,此时字符串被转换成了一个类似数组的对象。

const [a,b,c,d,e,f,g]="HelloWo";
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e);
console.log(f);
console.log(g);

在实战项目中解构Json数据格式还是很普遍的,有了ES6得帮助,提高了不少工作效率。

(完)

分享到

解决npm中提示 You may need an appropriate loader to handle this file type

在一个vuejs项目中使用了 reactjs 中 jsx格式的文件代码 , 提示:

You may need an appropriate loader to handle this file type

解决方法 :


npm install babel-preset-es2015

有警告先不用管 . 接着配置

webpack.config.js

在rules中添加

{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
}

解决问题

(完)

分享到

bootstrap栅格化的工作原理

简介

Bootstrap是一组用于网站和网络应用程序开发的开源前端(所谓“前端”,指的是展现给最终用户的界面。与之对应的“后端”是在服务器上面运行的代码)框架,包括HTML、CSS及JavaScript的框架,提供字体排印、窗体、按钮、导航及其他各种组件及Javascript扩展,旨在使动态网页和Web应用的开发更加容易。

兼容性以及版本

Bootstrap与最新版的Google Chrome、Firefox、Internet Explorer、Opera和Safari浏览器兼容,尽管有些浏览器并不是支持所有操作系统。

从2.0版本开始,Bootstrap支持响应式网页设计(RWD)。页面布局可以根据显示网页的设备(桌面、平板电脑、手机)来进行动态调整。

从3.0版本开始,Bootstrap将移动设备优先作为设计方针,更加强调了响应式设计。

4.0 alpha版本添加Sass和Flexbox的支持。

Bootstrap是开源软件,可以从GitHub上面找到。开发者被鼓励参与项目,并且对项目做出自己的贡献。

Bootstrap是GitHub上面被标记为“Starred”次数排名第二最多的项目。Starred次数超过105,000,而分支次数超过了47,000次。 - 来自维基百科

栅格化布局

栅格系统中,浏览器会随着屏幕的大小的增减自动分配最多 12 列。通过一系列的行(row) 与列(column)的组合来创建页面布局。

工作原理如下:
  1. “行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。
  2. 通过“行(row)”在水平方向创建一组“列(column)”。
  3. 你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为 行(row)”的直接子元素。
  4. 类似 .row 和 .col-xs-4 这种预定义的类,可以用来快速创建栅格布局。 Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
  5. 通过为“列(column)”设置 padding 属性,从而创建列与列之间的间隔(gutter)。
    通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding, 也就间接为“行(row)”所包含的“列(column)”抵消掉了 padding。
  6. 负值的 margin 就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
  7. 栅格系统中的列是通过指定 1 到 12 的值来表示其跨越的范围。例如,三个等宽的列 可以使用三个 .col-xs-4 来创建。
  8. 如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)” 所在的元素将被作为一个整体另起一行排列。
  9. 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆 盖栅格类。 因此,在元素上应用任何 .col-md- 栅格类适用于与屏幕宽度大于或等于分 界点大小的设备 ,并且针对小屏幕设备覆盖栅格类。因此,在元素上应用任何 .col-lg- 不存在, 也影响大屏幕设备。

啰嗦了这么多, 我们看看实际效果吧

demo显示效果以及示例代码如下

image

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap栅格化布局详解</title>
<!--viewport 意思是网页的默认高度-->
<!--width=device-width 意思是网页宽度默认等于屏幕宽度-->
<!--initial-scale=1 意思是原始缩放比例为 1.0-->
<meta name="viewport" content="width=device-width , initial-scale=1"/>
<!--更好的让bootstrap兼容IE-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--引入bootstrap库文件-->
<link rel="stylesheet" href="css/bootstrap.css">

<!--IE9以下不支持一些最新的CSS3属性, 如果需要使用的话 , 我们可以使用CSS3属性来做兼容性处理-->
<!-[if IE 9]>
<![endif]->
<style>
/*显示灰色方格*/
.a {
height: 100px;
background-color: #eee;
border:1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<!--移动设备屏幕-->
<div class="row">
<div class="col-xs-3 a">1-5</div>
<div class="col-xs-9 a">6-12</div>
</div>

<!--大屏幕设备-->
<div class="row">
<div class="col-lg-3 a">1-3</div>
<div class="col-lg-5 a">4-9</div>
<div class="col-lg-4 a">10-12</div>
<!--不推荐这么写,当列数大于12时,在这行内继续定义的列会被挤下去-->
<div class="col-lg-2 a">XXX</div>
</div>

<!--中等屏幕设备-->
<div class="row">
<div class="col-md-2 a">1-2</div>
<div class="col-md-10 a">3-12</div>
</div>

<!--小屏幕设备-->
<div class="row">
<div class="col-sm-6 a">1-6</div>
<div class="col-sm-6 a">7-12</div>
</div>
</div>
</body>
</html>

看了demo , 是不是感觉很简单呢

(完)

分享到

nodejs中的exports

模块中通过var声明的变量 , 其作用域属于只属于当前自身模块 ,外部不能直接访问,如果我们想在一个模块中能够访问另一个模块中定义的变量 ,我们可以 :

1. 把变量作为global对象的一个属性(不推荐的做法, 我们要尽量的减少全局变量的使用)

global.a=100;

2. 使用module对象的子对象exports

在module对象中, 有一个子对象exports对象,我们可以通过这个对象把一个模块中的局部变量对象进行提供访问

1.js

var a = 100;
module.exports.a=a;

2.js

var a  = require('./1.js'); //这个方法的返回值, 其实就是被加载模块中的module.exports

console.log(a);

输出结果: { a: 1000 }

3. 在模块作用域 , 还有内置的模块对象 , exports , 它其实就是 module.exports

结果为true
console.log(exports === module.exports);

他们两者之间尽量不要去破坏引用关系(在对象自身添加属性, 而不是添加一个对象)

分享到

跨域问题的解决

跨域:不同域之间相互请求资源

javaScript处于安全方面的考虑,不允许跨域调用其他页面的对象。

什么是跨域呢? 简单地理解就是因为javaScript同源策略的限制,a.com域名下的js无法操作b.com或是c.a.com域名下的对象
事实上HTTP和HTTPS两个协议的url看上去都可以省略端口号,但是他们访问的默认端口不同

同源策略:两者拥有相同的协议、域名和端口时,就属于同一个源(origin)(或者说同一个域);XHR请求不能跨域访问和调用。

HTTP默认访问80端口,HTTPS默认访问443端口,所以http访问https肯定是跨域

域名地址的组成:

1、完整的url:http://www.imooc.com:8080/video.php?id=001#mediaid=6238

2、协议(protocol):http://

3、主机(host):www.imooc.com:8080

4、主机名/域名(hostname):www.imooc.com
子域名:www
主域名:imooc.com

5、端口(port):8080

6、请求路径(pathname):video.php

7、请求参数(search):id=001

8、哈希码(hash):#mediaid=6238

主域名:
abc.com

主域名可以有如下的子域名:

www.abc.com

bbs.abc.com

beijing.bbs.abc.com

haidian.beijing.bbs.abc.com

处理跨域方法之代理

通过在同域名的web服务器端创建一个代理

北京服务器(域名:www.beijing.com)

上海服务器(域名:www.shanghai.com)

比如在北京的web服务器的后台(www.beijing.com/proxy-shanghaiservice.php)来调用上海服务器(www.shaghai.com/service.php)的服务,然后再把响应结果返回给前端,这样前端调用北京同域名的服务就和调用上海的服务效果相同了。

处理跨域方式之JSONP

a域名声明一个方法,b域名去调用该方法
script可以向不同页面提交http请求;
jsonp的方式只是针对get请求方式,不支持post请求

$.ajax({
type:"GET",
url:"http://127.0.0.1:8080/ajaxdemo/service.php?number"+$("#keyword").val(),
dataType:"jsonp", //由"json"改为"jsonp"
jsonp:"callback", //增加jsonp属性,并指定名称,用于后台的调用
success:function(data){
if(data.success){
$("#searchResult").html(data.msg);
}
else{
$("#searchResult").html("出现错误");
}
},
error:function(er){
alert(er.status);
}
});
$jsonp = $_GET["callback"];
$result = '()';

后端代码改造:
在search()函数中加入代码$jsonp=$_GET[“前端所取的jsonp的名字”]

注意:$result=$jsonp.’(……)’
jsonp连接是用点(.),并且里面的值要用括号括起来

处理跨域的方法之XHR2:

  • HTML5提供的XMLHttpRequest Level2已经实现了跨域访问以及其他的一些新功能

  • IE10以下的版本都不支持

  • 在服务器端添加代码

header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:POST,GET');

具体demo在 AjaxDemo

(完)

分享到

nodejs中的模块与文件加载系统

  • 一个文件就是一个模块

  • 每个模块都有自己的作用域

当我们在一个模块文件中定义一个变量时, 它并不是全局的, 而是属于当前模块下的 , 例如:

b.js

var b = 3;
(该变量只在b.js中生效)

模块加载系统

require('相对路径的文件地址');

不写文件路径时,加载的是node的核心模块,或者是 node_modules,,例如:

require('1.js');

文件查找机制

当我们没有给文件地址后缀时,例如:

require('xxx');

  1. 首先是在文件名进行查找
  2. js …
  3. json …
  4. node ….

文件名称 -> .js -> .json -> .node

(完)

分享到

认识NodeJS

Node.js是一个能够在服务器端运行JavaScript的开放源代码、跨平台JavaScript运行环境。Node.js由Node.js基金会持有和维护[3],并与Linux基金会有合作关系[4]。Node.js采用Google开发的V8运行代码,使用事件驱动、非阻塞和异步输入输出模型等技术来提高性能,可优化应用程序的传输量和规模。这些技术通常用于数据密集的事实应用程序。

Node.js大部分基本模块都用JavaScript语言编写。在Node.js出现之前,JavaScript通常作为客户端程序设计语言使用,以JavaScript写出的程序常在用户的浏览器上运行。Node.js的出现使JavaScript也能用于服务器端编程。Node.js含有一系列内置模块,使得程序可以脱离Apache HTTP Server或IIS,作为独立服务器运行。

目前,Node.js已被IBM、Microsoft、Yahoo、Walmart、Groupon、SAP、 LinkedIn、Rakuten、PayPal等企业采用。

来自维基百科

nodejs与js的主要区别

js (主要是操作浏览器)

  • ecmascript
  • DOM
  • BOM

nodejs(主要是操作系统,网络)

  • ecmascript
  • os
  • net
  • database
  • file

区别

  • 底层都差不多一样,都是基于ecmascript语法(数据类型的定义,语法结构.内置对象都一样)
  • 顶层对象不同, js是window, node是global

(完)

分享到

fullpagejs配置属性小结

简介

如今我们经常能见到全屏网站,尤其是国外网站。这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次。比如 iPhone 手机 的介绍页面,QQ浏览器的官网站。如果你也希望你的网站能设计成全屏的,显得更上档次,你可以试试 fullPage.js。

fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站,主要功能有:
支持鼠标滚动
支持前进后退和键盘控制
多个回调函数
支持手机、平板触摸事件
支持 CSS3 动画
支持窗口缩放
窗口缩放时自动调整
可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等

兼容性

jQuery 兼容

兼容 jQuery 1.7+。

浏览器兼容

image

demo

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>fullPage.js - Pure Javascript version</title>
<meta name="author" content="Alvaro Trigo Lopez"/>
<meta name="description" content="fullPage plugin by Alvaro Trigo. Pure javascript version of full screen slider."/>
<meta name="keywords"
content="fullpage,jquery,alvaro,trigo,plugin,fullscren,screen,full,iphone5,apple,pure,javascript,slider,hijacking"/>
<meta name="Resource-type" content="Document"/>
<link rel="stylesheet" type="text/css" href="css/javascript.fullPage.css"/>

<style>
/*Reset CSS*/
/*Custom CSS*/
</style>
</head>
<body>
<div id="fullpage">
<div class="section section1">
<h1>第一页</h1>
</div>
<div class="section section2">
<div class="slide"><h1>slide1</h1></div>
<div class="slide"><h1>slide2</h1></div>
<div class="slide"><h1>slide3</h1></div>
<div class="slide"><h1>slide4</h1></div>
</div>
<div class="section section3">
<h1>第三页</h1>
</div>
<div class="section section4">
<h1>第四页</h1>
</div>
<div class="section section5">
<h1>第五页</h1>
</div>
</div>

<script type="text/javascript" src="js/javascript.fullPage.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
fullpage.initialize('#fullpage', {
// *** paddingTop/paddingBottom ***
// ***********
// paddingTop: '200px',
// 默认为0 , 设置一个在顶部或者底部的padding, 用于设置导航栏或者页尾信息等等
// *********

scrollOverflow: false, // 内容超过满屏是否显示滚动条, 默认false, 如要滚动查看内容, 需要 jquery.slimscoll插件的配合(模拟传统的浏览器滚动条)

sectionSelector: '.section', // section 的选择器 , 默认为 .section

slideSelector: '.slide', // slide 的选择器 , 默认为 .slide


// *********
navigation: true, // 默认为false , 如果为true, 则会显示导航小圆点

navigationPosition: 'right',

showActiveTooltip: true, // 默认为false , 是否直接显示导航tips

slidesNavigation: true,// 默认为false, slide幻灯片底部tips显示

slidesNavPosition: 'top', // 默认为bottom , slide 幻灯片tips显示位置, 上或者下

navigationTooltips: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'], // 导航提示
// **********

menu: false, // 默认为false . 绑定菜单, 设定的相关属性(ul元素)与 anchors值对应后, 菜单可以控制滚动 . 可以设置为菜单的jquery选择器

recordHistory: true, //是否记录历史 , 默认为true , 通过浏览器前进后退那个, 注意, 如果设置了autoScrolling为false , 那么这个配置将被关闭, 既设置为false.

animateAnchor: true,// 锚链接是否可以控制滚动动画 , 默认为true , 如果设置为false , 则通过链接定位到某个页面显示不再有动画效果

continuousVertival: false, // 是否循环滚动 ,默认为false , 如果设置为true ,则页面会循环滚动(不会和looptop..一样, 这个它没有跳动的动画), 不能与loopTop,loopBottom同时使用,不兼容

fixedElements: '#header', // 默认为null , 需要配置一个jquery选择器 , 在页面滚动时 , 配置的选择器元素固定不动

keyboardScrolling: true, // 默认为true , 是否可以用键盘方向键导航

touchSensitivity: 5, // 默认为5, 在移动设置中的敏感度 , 最高100 , 越高越难滑动


scrollBar: false, // 默认为false , 如果设置为true, 则会有滚动条 , 但是还是有动画效果

autoScrolling: true, //是否使用插件的滚动方式 , 默认true , 如果为false, 则会出现浏览器自带的滚动条 , 效果消失


loopTop: false, // 滚动到最顶部是否继续滚动到底部 , 默认为false

loopBottom: false, // 滚动到最底部是否继续滚动到底部 , 默认为false

loopHorizontal: true, // slide 是否循环滚动 , 默认为true


lockAnchors: false, //默认为false , 如果设置为true , 那么定义的锚链接就没效果了, 使用较少

scrollingSpeed: 800, // 滚动速度, 默认为700毫秒

resize: false, // 字体不随着窗体的缩放而缩放, 默认为false

verticalCentered: true, // 每一页的内容是否垂直居中, 默认为true

controlArrows: true, // 默认为true , 意思是让slide有左右两边的箭头, false即不显示

// sectionsColor: ['red','blue','black','pink','white'], //设置不同section的background-color

anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'], //定义锚链接
menu: '#menu',

css3: true, // 默认为true. 提高支持css3对浏览器的支持,更加流畅

easing: 'easeInOutCubic' // 默认为这个属性, 如果修改这个属性, 需要引入jquery.easings插件或者jquery ui

});

</script>

</body>
</html>
分享到