庄周梦蝶1973的个人资料 - RAT

庄周梦蝶1973 庄周梦蝶1973

H5edu.cn教育学校业务总监

关注数: 7 粉丝数: 9 发帖数: 46 关注贴吧数: 8

h5edu教育的正宗Swiper课程视频来自：http://tieba.baidu.com/mo/q/checkurl?url=http%3A%2F%2Fv.youku.com%2Fv_show%2Fid_XMTY0ODQ4MTU5Ng%3D%3D.html&urlrefer=fe3384887447f6e04bb6c2dc2bad7007

在JavaScript教程中该如何下AngularJS 指令？本文为官方 HTML5培训AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 通过内置的指令来为应用添加功能。AngularJS 允许你自定义指令。AngularJS 指令AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。ng-app 指令初始化一个 AngularJS 应用程序。ng-init 指令初始化应用程序数据。ng-model 指令把元素值（比如输入域的值）绑定到应用程序。完整的指令内容可以参阅 AngularJS 参考手册。AngularJS 实例<div ng-app="" ng-init="firstName='John'"> <p>在输入框中尝试输入：</p> <p>姓名：<input type="text" ng-model="firstName"></p> <p>你输入的为： {{ firstName }}</p></div> 教程，主要介绍：JavaScript强化教程 —— AngularJS 指令ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序的"所有者"。Note一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序。数据绑定上面实例中的 {{ firstName }} 表达式是一个 AngularJS 数据绑定表达式。AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。{{ firstName }} 是通过 ng-model="firstName" 进行同步。在下一个实例中，两个文本域是通过两个 ng-model 指令同步的：AngularJS 实例<div ng-app="" ng-init="quantity=1;price=5"><h2>价格计算器</h2>数量： <input type="number"ng-model="quantity">价格： <input type="number" ng-model="price"><p><b>总价：</b> {{ quantity * price }}</p></div>

js页面跳转常用的几种方式本文为官方的HTML5培训教程，主要介绍jsp中实现页面跳转的不同方式 JavaScript强化教程第一种<script language="javascript" type="text/javascript"> window.location.href="http://tieba.baidu.com/mo/q/checkurl?url=http%3A%2F%2Fwww.h5edu.cn&urlrefer=6f0add929b8bc2db83e37f521290433d="+window.location.href; </script> 第二种<script language="javascript"> alert("返回"); window.history.back(-1); </script> 第三种<script language="javascript"> window.navigate("http://tieba.baidu.com/mo/q/checkurl?url=http%3A%2F%2Fwww.h5edu.cn&urlrefer=6f0add929b8bc2db83e37f521290433d"); </script> 第四种 self指代当前窗口对象,属于window最上层的对象;<script language="JavaScript"> self.location='http://tieba.baidu.com/mo/q/checkurl?url=http%3A%2F%2Fwww.h5edu.cn&urlrefer=6f0add929b8bc2db83e37f521290433d'; </script> 第五种在顶层页面打开url（跳出框架）<script language="javascript"> alert("非法访问！"); top.location='http://tieba.baidu.com/mo/q/checkurl?url=http%3A%2F%2Fwww.h5edu.cn&urlrefer=6f0add929b8bc2db83e37f521290433d'; </script>

swiper的使用（一）这里是H5EDU HTML5培训 swiper系列教程001：swiper教程 swiper是一个移动端的页面滑动框架，我们可以使用这个框架来编写自己的简历。 swiper当中除了页面滑动意外，还提供了其他各种各样的功能组件，供我们使用。以及方法和回调函数。我们先实现一个基本的swiper页面，只有翻页功能的页面。首先我们要先引用框架文件。swiper.css 和 swiper.js <link rel="stylesheet" href="swiper.css"> <script src="swiper.js"></script> 再建立一个外部容器。swiper-cotainer <div class="swiper-container"> 然后在外部容器当中添加一个内部容器。swiper-wrapper <div class="swiper-wrapper"> 在内部容器当中添加每一个翻页页面 <div class="swiper-slide>页面内容</div> <div class="swiper-slide>页面内容</div> <div class="swiper-slide>页面内容</div> <div class="swiper-slide>页面内容</div> <div class="swiper-slide>页面内容</div> <div class="swiper-slide>页面内容</div> </div> </div> 然后在js当中进行初始化 <script> var swiper = new Swiper('.swiper-container'); </script>

swiper的基础使用（二）本文为H5EDU机构官方的HTML5培训 swiper系列教程002：swiper教程上一节我们实现了一个基本的滑动页面，除了滑动什么功能都没有，那么这节课我们就要在页面当中添加其他的功能属性了。首先按照上节课的内容，将一个基本的swiper页面实现。然后在初始化的js代码当中添加属性。当然事先不要忘记引用下载好的框架文件。我们先添加翻页导航的功能组件。在外部容器当中加入翻页导航。 <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">页面内容</div> <div class="swiper-slide">页面内容</div> <div class="swiper-slide">页面内容</div> <div class="swiper-slide">页面内容</div> <div class="swiper-slide">页面内容</div> </div> <div class="swiper-pagination"></div> //翻页导航的div </div> <script> var swiper = new Swiper('.swiper-container',{ pagination:'.swiper-pagination', //绑定翻页导航 paginationClickable:true //设定可以点击翻页导航进行翻页 }); </script> 这样就在页面当中添加了一个翻页导航出来。

swiper的基础使用（二）本文为H5EDU机构官方的HTML5培训 swiper系列教程002：swiper教程上一节我们实现了一个基本的滑动页面，除了滑动什么功能都没有，那么这节课我们就要在页面当中添加其他的功能属性了。首先按照上节课的内容，将一个基本的swiper页面实现。然后在初始化的js代码当中添加属性。当然事先不要忘记引用下载好的框架文件。我们先添加翻页导航的功能组件。在外部容器当中加入翻页导航。 <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">页面内容</div> <div class="swiper-slide">页面内容</div> <div class="swiper-slide">页面内容</div> <div class="swiper-slide">页面内容</div> <div class="swiper-slide">页面内容</div> </div> <div class="swiper-pagination"></div> //翻页导航的div </div> <script> var swiper = new Swiper('.swiper-container',{ pagination:'.swiper-pagination', //绑定翻页导航 paginationClickable:true //设定可以点击翻页导航进行翻页 }); </script> 这样就在页面当中添加了一个翻页导航出来。

【 H5EDU干货】JavaScript强化教程——cocosjs屏幕适配方案本文为 H5EDU 机构官方 HTML5培训教程，主要介绍：JavaScript强化教程 ——cocosjs屏幕适配方案首先说点题外话，对于任何大型项目来说，coding的规范重要，在cocos2dx-jsbinding这个框架中，javascript是一个绝对核心的脚本语言，99%的游戏逻辑都由js完成。脚本的编写量绝对大于大多数的web项目，掌握javascript的扎实的基础至关重要。入正题，今天讨论的是如何使用jsb来处理移动平台的多分辨率适配问题。就目前的移动平台来讲，分辨率可谓是百花齐放，且不谈安卓平台各种稀奇古怪的分辨率，就ios平台有 ip4(960*640),ip5(1136*640),ipad2,mini(1024*768),ipad3,ipad4(2048*1536),这四种当然今后还有更多，如何保证一套代码，一套资源通吃android和ios平台，同时游戏的布局又不会发生偏差，能够恰当好处，这是我们追求的目标。 cocos2d-x本身提供有几种屏幕适配API，但是并不是非常完美，并且每种方案都有自己的缺陷，我介绍一下如何用js来处理这个棘手的问题。首先我们要定义实际使用资源的分辨率，也就是美术设计是用的分辨率大小，这里我们将资源定义为960*640，这个分辨率有什么好处?第一是这个分辨率是一个中等类型的分辨率，它比1年前的主流android分辨率800*480)要大,比新出的高端机型分辨率要小一点，同时也是主流的ios分辨率。选资源大小有一个要点，不能选的过高，这样对低端机型就是浪费，你需要花很大的下载来存这些资源，不值得，但是选太小的也不行，高端机型上又模糊无比，所以选择一个中等的分辨率。分辨率适配的核心思想是缩放，也就是layer.scale函数，但是一定要是等比缩放，如果用layer.scaleX或者layer.scaleY函数，虽然可以把游戏画面非常简单的搞成分辨率适配成没有黑边，但是整个游戏画面已经被拉伸或者压挤，不能达到我们需要的效果。游戏中一般有3大类层。 1.大于屏幕的层，可实现拖动、缩放或者可以随着角色移动移动场景画面的,一般这种场景为主城、副本等等。 2.居中的层，一般是同时基于水平方向和竖直方向居中的，也有基于一个方向居中的。这种一般为ui弹层。 3.靠边的层，一般是ui，这些ui分别是紧贴屏幕边缘。以上几种类型是基本的类型，当然某一个场景可能是上面几种层类型的组合。比如一个传统九宫格的战报场景，人物的排列是基于居中的，ui分布是靠边的，实现的时候我们将人物和ui分别绘制再2个layer中，每个layer基于相应的类型进行缩放，就可以达到想要的效果。下面分别来说明下，三种类型的layer如何做缩放。第一种：这种其实最简单，因为这种层的底图超过屏幕（一般都超出很多，因为要做移动和多点缩放，或者要随着角色移动至少一屏），所以只要做一个通用缩放就可以，何谓通用缩放，还是看代码 // 获取屏幕尺寸 var size = cc.Director.getInstance().getWinSize(); this.designResolution = cc.size(960,640); // 获取高宽系数 var widthRatio = size.width/this.designResolution.width,heightRatio = size.height/this.designResolution.height; if (widthRatio !=1 || heightRatio!=1){ // 按照比例小的系数去进行缩放 if (widthRatio<heightRatio){ this._scaleRatio = widthRatio; }else{ this._scaleRatio = heightRatio; } }else{ this._scaleRatio = 1; } this.setScale(this._scaleRatio);第二种：在上面通用缩放的基础上设定层的坐标，使之可以上下左右居中 var size = cc.Director.getInstance().getWinSize(); this.setPosition(cc.p((size.width-this.designResolution.width*this._scaleRatio)/2,(size.height-this.designResolution.height*this._scaleRatio)/2));第三种：这种layer是紧靠屏幕边缘的，所以我们要分别设定他的锚点，我们将整个layer分为9个点，刚好呈现一个“米”字型，其中每个点都需要new一个单独layer来设定它的锚点。 this._uiLayerMap = this._uiLayerMap || {}; if (this._uiLayerMap[directionType]){ return this._uiLayerMap[directionType]; } var layer = cc.Layer.create(); layer.setPosition(cc.p(0,0)); this._uiLayerMap[directionType] = layer; // 根据directionType设定锚点位置 switch (directionType){ case 1: layer.setAnchorPoint(cc.p(0,1)); break; case 2: layer.setAnchorPoint(cc.p(0.5,1)); break; case 3: layer.setAnchorPoint(cc.p(1,1)); break; case 4: layer.setAnchorPoint(cc.p(1,0.5)); break; case 5: layer.setAnchorPoint(cc.p(1,0)); break; case 6: layer.setAnchorPoint(cc.p(0.5,0)); break; case 7: layer.setAnchorPoint(cc.p(0,0)); break; case 8: layer.setAnchorPoint(cc.p(0,0.5)); break; } this.addChild(layer);当然，这些层生成完以后还需要做一个通用缩放。使用的时候要注意2点。 1.设定坐标的时候要按照size.width和size.height来计算大小，例如我设定屏幕右下角ui的坐标为 sprite1.setPositon(size.width,50); sprite2.setPositon(size.width-80,50); sprite3.setPositon(size.width-160,50);2.针对每个角的layer需要选择上面设定相应锚点layer。

【 H5EDU干货】swiper的基础使用（十）本文为H5EDU机构官方的HTML5培训教程 swiper教程这节课我们介绍swiper页面的多行显示。这节课我们介绍swiper当中的swiper嵌套。这次第一步有些不一样，虽然同样是要搭建swiper页面，但是我们在一个swiper页面当中的slide里面嵌套了一个swiper在里面。<div class="swiper-container swiper-container-h"> <div class="swiper-wrapper"> <div class="swiper-slide">Horizontal Slide 1</div> <div class="swiper-slide"> <div class="swiper-container swiper-container-v"> <div class="swiper-wrapper"> <div class="swiper-slide">Vertical Slide 1</div> <div class="swiper-slide">Vertical Slide 2</div> <div class="swiper-slide">Vertical Slide 3</div> <div class="swiper-slide">Vertical Slide 4</div> <div class="swiper-slide">Vertical Slide 5</div> </div> <div class="swiper-pagination swiper-pagination-v"></div> </div> </div> <div class="swiper-slide">Horizontal Slide 3</div> <div class="swiper-slide">Horizontal Slide 4</div> </div>  <div class="swiper-pagination swiper-pagination-h"></div> </div>我们可以看到，这次在swiper的外部容器当中添加了一个类名，swiper-container-h，这个类名其实我们可以随便取一个，作为一个标记，记录我们这个外部容器为哪一个swiper页面的外部容器，我们在初始化的时候是要绑定它的，然后有几个swiper的页面我们就要初始化几次，并且每一个初始化都要绑定到不同的swiper页面的外部容器上面，不然的话我们的页面样式就会错乱，下面进行初始化。 var swiperH = new Swiper('.swiper-container-h', { pagination: '.swiper-pagination-h', paginationClickable: true, spaceBetween: 50 }); var swiperV = new Swiper('.swiper-container-v', { pagination: '.swiper-pagination-v', paginationClickable: true, direction: 'vertical', spaceBetween: 50 });这里因为有俩个swiper页面所以分别初始化了俩次，然后要分别设定每个swiper页面的CSS样式，以及每一个swiper页面当中的属性。注意，绑定的外部容器类名一定部能相同，不然一个页面初始化俩次会造成样式错乱。(未完待续)

【 H5EDU干货】JavaScript强化教程——对象的值传递和引用传递本文主要介绍：JavaScript强化教程——对象的值传递和引用传递 function SetName(obj){ obj.name="Tom";//执行之前，此时的obj和Person的name属性均为undefined obj1=new Object(); obj1=obj;//声明一个全局对象，那么obj、obj1和Person此时应该是同一个对象 }//SetName函数执行完之后，obj对象销毁，其余对象仍然存在 Person=new Object();//声明Person对象 SetName(Person);//调用SetName函数并将对象作为参数传入 obj1.name="Lucy";//通过obj1改变Person的name属性 alert(Person.name);//输出“Lucy”,左边的代码结论给的感觉是，JavaScript的对象就是按引用传递/*我想知道在调用SetName(Person)的时候，Person传递到function SetName(obj)位置到底是值传递还是引用传递，如果按照如下的说法-->摘抄至JavaScript高级教程(第三版)function SetName(obj){obj.name="Tom";obj=new Object();obj.name="Lucy";}Person=new Object();//声明Person对象SetName(Person);//alert(Person.name);//输出Tom我感觉调用函数的时候Person和obj应该是用一个引用，但是是将function中的obj局部对象重新声明，我觉得在执行了obj=new Object()重新声明对象这个语句之后，此时的obj和调用SetName(Person)的Person对象是不同的引用（地址）， obj.name="Lucy";这句话对Person此时根本就没有起作用，所以才会有书中的结论，输出为“Tom"的结果，所以，我觉得书中的这个代码还是不足以证明JavaScript中对象是按值传递的这个结论，我想请问如何去理解这个问题，谢谢大家*/再附上网上找的一段代码，在调用函数输入的都是对象，为什么有不同的结果：<script type="text/javascript">function foo(v3){v3={a:3};alert(v3.a);//3}var v4={};foo(v4);alert(v4.a);//undefined</script><script type="text/javascript">function fooled(v2){v2.b=4;alert(v2.b);//4}var v1=new Object();fooled(v1);alert(v1.b);//4</script>

【 H5EDU干货】js(javascript)小谈变量声明(显隐声明，声明提前) 本文章为JavaScript强化教程var a=5；function fun(){ a=0; alert(a); //0 alert(this.a); //5 var a; alert (a); //0 }fun();以上代码将会输出 0 ，5，0. 首先在js中我们的变量声明赋值分为两个部分。 1.变量的声明 var a；2.变量的赋值 a=2; 但是一般我们会把变量的声明和赋值写在一起也就是 var a=2；而在js 中变量的声明会被提前到当前作用域的开始，也就是说以上代码和下面代码是等价的 var a=5；function fun(){ var a； //变量的声明提前 a=0; //赋值语句保持不变 alert(a); //0 alert(this.a); //5 alert (a); //0 }所以 alert（a）其实是输出的局部变量 a的值，this.a 则是全局变量a 的值，以上是介绍变量的声明提前下面我们的代码将如下修改 var a=5；function fun(){ a=0; alert(a); //0 alert(this.a); //0 alert (a); //0 }这时候我们所有的输出值都为0；我们声明变量分为显示声明（var a）和隐式声明（a）；当我们一个函数内部的局部变量采用隐式声明的方式，那么这个变量就不在是一个局部变量，而是一个全局变量，所以相当于给全局变量a 赋值 0；这样输出的全部是a。

【 H5EDU干货】swiper的基础使用（十）本文为 swiper教程这节课我们介绍swiper页面的多行显示。这节课我们介绍swiper当中的swiper嵌套。这次第一步有些不一样，虽然同样是要搭建swiper页面，但是我们在一个swiper页面当中的slide里面嵌套了一个swiper在里面。<div class="swiper-container swiper-container-h"> <div class="swiper-wrapper"> <div class="swiper-slide">Horizontal Slide 1</div> <div class="swiper-slide"> <div class="swiper-container swiper-container-v"> <div class="swiper-wrapper"> <div class="swiper-slide">Vertical Slide 1</div> <div class="swiper-slide">Vertical Slide 2</div> <div class="swiper-slide">Vertical Slide 3</div> <div class="swiper-slide">Vertical Slide 4</div> <div class="swiper-slide">Vertical Slide 5</div> </div> <div class="swiper-pagination swiper-pagination-v"></div> </div> </div> <div class="swiper-slide">Horizontal Slide 3</div> <div class="swiper-slide">Horizontal Slide 4</div> </div>  <div class="swiper-pagination swiper-pagination-h"></div> </div>我们可以看到，这次在swiper的外部容器当中添加了一个类名，swiper-container-h，这个类名其实我们可以随便取一个，作为一个标记，记录我们这个外部容器为哪一个swiper页面的外部容器，我们在初始化的时候是要绑定它的，然后有几个swiper的页面我们就要初始化几次，并且每一个初始化都要绑定到不同的swiper页面的外部容器上面，不然的话我们的页面样式就会错乱，下面进行初始化。 var swiperH = new Swiper('.swiper-container-h', { pagination: '.swiper-pagination-h', paginationClickable: true, spaceBetween: 50 }); var swiperV = new Swiper('.swiper-container-v', { pagination: '.swiper-pagination-v', paginationClickable: true, direction: 'vertical', spaceBetween: 50 });这里因为有俩个swiper页面所以分别初始化了俩次，然后要分别设定每个swiper页面的CSS样式，以及每一个swiper页面当中的属性。注意，绑定的外部容器类名一定部能相同，不然一个页面初始化俩次会造成样式错乱。(未完待续)

【 H5EDU干货】js页面跳转常用的几种方式本文为H5EDU机构官方的HTML5培训教程，主要介绍jsp中实现页面跳转的不同方式 JavaScript强化教程第一种<script language="javascript" type="text/javascript"> window.location.href="http://tieba.baidu.com/mo/q/checkurl?url=http%3A%2F%2Fwww.h5edu.cn&urlrefer=6f0add929b8bc2db83e37f521290433d="+window.location.href; </script> 第二种<script language="javascript"> alert("返回"); window.history.back(-1); </script> 第三种<script language="javascript"> window.navigate("http://tieba.baidu.com/mo/q/checkurl?url=http%3A%2F%2Fwww.h5edu.cn&urlrefer=6f0add929b8bc2db83e37f521290433d"); </script> 第四种 self指代当前窗口对象,属于window最上层的对象;<script language="JavaScript"> self.location='http://tieba.baidu.com/mo/q/checkurl?url=http%3A%2F%2Fwww.h5edu.cn&urlrefer=6f0add929b8bc2db83e37f521290433d'; </script> 第五种在顶层页面打开url（跳出框架）<script language="javascript"> alert("非法访问！"); top.location='http://tieba.baidu.com/mo/q/checkurl?url=http%3A%2F%2Fwww.h5edu.cn&urlrefer=6f0add929b8bc2db83e37f521290433d'; </script>

【 H5EDU干货】swiper的基础使用（七）本文为H5EDU机构官方的HTML5培训教程 swiper教程这节课我们介绍swiper页面的自动分组+居中的内容。第一步还是创建一个基础的swiper页面<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">第一页</div> <div class="swiper-slide">第二页</div> <div class="swiper-slide">第三页</div> <div class="swiper-slide">第四页</div> <div class="swiper-slide">第五页</div> <div class="swiper-slide">第六页</div> <div class="swiper-slide">第七页</div> <div class="swiper-slide">第八页</div> <div class="swiper-slide">第九页</div> <div class="swiper-slide">第十页</div> </div> <div class="swiper-pagination"></div> </div> 之后我们用选择器来将页面的宽度设定为不相同的（便于我们观看自动分组的效果）body{ margin:0; padding:0; background:#F2F2F2; } .swiper-container{ width:100%; height:300px; margin:20px auto; } .swiper-slide{ width:60%; font-size:18px; text-align:center; justify-content:center; align-items:center; display:flex; background:#fff; } .swiper-slide:nth-child(2n){ //设定页面不同的宽度 width:40%; } .swiper-slide:nth-child(3n){ width:20%; }之后再去js代码当中进行初始化并且添加属性<script> var swiper = new Swiper('.swiper-container',{ pagination:'.swiper-pagination', paginationClickable:true, slidesPerView:'auto', spaceBetween:30, centeredSlides:true }); </script>通过js当中添加的属性我们可以发现，只是将分组属性的值变为了‘auto’，然后开启slide页面居中的属性就可以了，怎么样，是不是非常简单呢？（未完待续）

【 H5EDU干货】H5EDU学员swiper作品展示刘佳黑暗之魂 http://tieba.baidu.com/mo/q/checkurl?url=http%3A%2F%2Fwww.h5edu.cn%2Fusercode%2F02935b78ede011d02919071d5910a4d755b92ddd%2F++&urlrefer=bc88c2098e1333a7b6e0d27685a2c42f 葛啸个人简历 http://tieba.baidu.com/mo/q/checkurl?url=http%3A%2F%2Fwww.h5edu.cn%2Fusercode%2F191cd7ebb106f16f3c20ce8cd9100d4a408edef0%2F+&urlrefer=462e944af390dfa98b738adf18eb00a9 于鑫月冯兴佳泰勒斯威夫特介绍http://tieba.baidu.com/mo/q/checkurl?url=http%3A%2F%2Fwww.h5edu.cn%2Fusercode%2F147fcaa9c3995329c2f31c01bd761669072acb05%2F+&urlrefer=b38830737d56c1d3351809f145261d2c 孙鑫铭李冬雪绘蓝网络 http://tieba.baidu.com/mo/q/checkurl?url=http%3A%2F%2Fwww.h5edu.cn%2Fusercode%2F7ec668ce869a50f6b046681c1e3da4f6a386e98b%2F%3Ffrom%3Dsinglemessage%26isappinstalled%3D0+&urlrefer=aa820b987bf2e39afbe25eddedfdbea5 赵海月郭晓彤普拉达 http://tieba.baidu.com/mo/q/checkurl?url=http%3A%2F%2Fwww.h5edu.cn%2Fusercode%2F1ff1dc65632b776bd53255a38e7fd73876600836%2F+&urlrefer=cf7ba6b4dd85f7a08413ff6f0f33b7bc 颜廷熙 C2home http://tieba.baidu.com/mo/q/checkurl?url=http%3A%2F%2Fwww.h5edu.cn%2Fusercode%2Fe99e098f7ba645f24c667f222673953f5beee2cd%2F+&urlrefer=d759c326a0198c1b2c6f68b9474f5292 徐晓轩新浪微博全年财报 http://tieba.baidu.com/mo/q/checkurl?url=http%3A%2F%2Fwww.h5edu.cn%2Fusercode%2Fd5671769336292b50b18603cae17e937d52e0d0c%2F+&urlrefer=afdca18325f39fbeee7de6fd79a4d71e 陶水成毕业季 http://tieba.baidu.com/mo/q/checkurl?url=http%3A%2F%2Fwww.h5edu.cn%2Fusercode%2Fbf9b7b379217ec63ed39faade24f0a825341c60b%2F+&urlrefer=c8b085168fea910247cfc63b11f47359 邓奇练袁华镇招生移动手册 http://tieba.baidu.com/mo/q/checkurl?url=http%3A%2F%2Fwww.h5edu.cn%2Fusercode%2Fafc0317dc8d2443ee8c301a76eb1809be7cb190d%2F%3Ffrom%3Dsinglemessage%26isappinstalled%3D0+&urlrefer=c76cc4c71f8ab6b3a98731a059d0a152 楚会霞王世杰原创520主题 http://tieba.baidu.com/mo/q/checkurl?url=http%3A%2F%2Fwww.h5edu.cn%2Fusercode%2F5e367caa0e126a0586a1a36da62c61d40d52664e%2F+&urlrefer=a5e4fee976449805ebe0e1dc80727a12 阎珅骆阳热气球 http://tieba.baidu.com/mo/q/checkurl?url=http%3A%2F%2Fwww.h5edu.cn%2Fusercode%2F88bb23a74fc6f641ed3faade754e21499fd2475a%2F+&urlrefer=3a144a75470dcb59a45436e940a39947 李金雅 http://tieba.baidu.com/mo/q/checkurl?url=http%3A%2F%2Fwww.h5edu.cn%2Fusercode%2F91e5c4f4a9375279a7466f1515d13e8d221f6aa4%2F+&urlrefer=7d051d9a45d5e0700a8c24b19aac07dd

【 H5EDU干货】JavaScript强化教程-cookie对象本文为H5EDU机构官方HTML5培训教程，主要介绍：JavaScript强化教程——cookie对象 Cookie对象：是一种以文件（Cookie文件）的形式保存在客户端硬盘的Cookies文件夹中的用户数据信息（Cookie数据）。Cookie文件由所访问的Web站点建立，以长久的保存客户端与Web站点间的会话数据，并且该Cookie数据只允许被所访问的Web站点进行读取。存储 cookie<script> function saveCookie(cname,cvalue,exdays){ var d = new Date(); d.setTime(d.getTime()+exdays*24*60*60*1000); var exprices = "exprices="+ d.toGMTString(); document.cookie = cname+"="+cvalue+";"+exprices; } 读取cookie function readCookie(cname){ var name = cname+"="; var ck =document.cookie.split(";"); for(var n=0;n<ck.length;n++){ var c=ck[n].trim(); if(c.indexOf("name")==0){ return c.substr(name.length, c.length); } } }html中的应用 <input type="button" value="存储" onclick="saveCookie('name','aaa5','1')"> <input type="button" value="读取" onclick="alert(readCookie('name'))">

【 H5EDU干货】swiper的基础使用（四）这里是HTML5培训 swiper系列教程004：swiper教程首先我们要搭建一个基础的swiper页面。当然事先不要忘记引用下载好的框架文件。这一章我们添加了设置容器的宽、高 <!doctype html> <html> <head> <title>在slide之间加上间隙</title> <meta charset="utf-8"> <link rel="stylesheet" href="swiper.min.css"> <style> body{ margin:0; padding:0; } .swiper-container{ width:500px; height:300px; margin:20px auto; } .swiper-slide{ text-align:center; font-size:18px; display:flex; justify-content:center; align-items:center; background:#F2F2F2; } </style> </head> 之后还是按照第一节课的内容实现一个基本的swiper页面的布置 <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">第一页</div> <div class="swiper-slide">第二页</div> <div class="swiper-slide">第三页</div> <div class="swiper-slide">第四页</div> <div class="swiper-slide">第五页</div> </div> <div class="swiper-pagination"></div> </div> 然后在js的初始化代码当中加入间隙的属性就可以了 <script src="swiper.min.js"></script> <script> var swiper = new Swiper('.swiper-container',{ pagination:'.swiper-pagination', paginationClickable:true, spaceBetween:30 //添加每个slide的间隙 }); </script> </body> </html> 这样就可以使在每个slide页面中间加入间隙。(未完待续)

【 H5EDU干货】swiper的基础使用（三）本文为HTML5培训 swiper系列教程003：swiper教程首先按照第一节课的内容，将一个基本的swiper页面实现。然后在初始化的js代码当中添加属性。当然事先不要忘记引用下载好的框架文件。我们先添加翻页导航的功能组件。便于我们确认页面的垂直滚动，以及垂直滚动下导航的样式。在外部容器当中加入翻页导航。 <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">页面内容</div> <div class="swiper-slide">页面内容</div> <div class="swiper-slide">页面内容</div> <div class="swiper-slide">页面内容</div> <div class="swiper-slide">页面内容</div> </div> <div class="swiper-pagination"></div> //翻页导航的div </div> <script> var swiper = new Swiper('.swiper-container',{ pagination:'.swiper-pagination', //绑定翻页导航 paginationClickable:true， //设定可以点击翻页导航进行翻页 direction:'vertical' //设定页面垂直翻页 }); </script> 这样就可以使页面进行垂直的滚动。（未完待续）

swiper的基础使用（二）这里是HTML5培训 swiper系列教程002：swiper教程上一节我们实现了一个基本的滑动页面，除了滑动什么功能都没有，那么这节课我们就要在页面当中添加其他的功能属性了。首先按照上节课的内容，将一个基本的swiper页面实现。然后在初始化的js代码当中添加属性。当然事先不要忘记引用下载好的框架文件。我们先添加翻页导航的功能组件。在外部容器当中加入翻页导航。 <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">页面内容</div> <div class="swiper-slide">页面内容</div> <div class="swiper-slide">页面内容</div> <div class="swiper-slide">页面内容</div> <div class="swiper-slide">页面内容</div> </div> <div class="swiper-pagination"></div> //翻页导航的div </div> <script> var swiper = new Swiper('.swiper-container',{ pagination:'.swiper-pagination', //绑定翻页导航 paginationClickable:true //设定可以点击翻页导航进行翻页 }); </script> 这样就在页面当中添加了一个翻页导航出来。（未完待续）

1 下一页