2016.06 第三周 群问题分享

HTML+CSS

怎么让一个容器里面不管存在2个子元素还是1个子元素都能垂直居中

2016.06.20~2016.06.24

核心内容

弹性布局

参考答案

实例:

<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <title>HTML5学堂</title>
 <link rel="stylesheet" href="reset.css">
 <style>
  .wrap {
    width: 500px;
    height: 500px;
    border: 2px solid #f00;
    /*兼容处理*/
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: box;
    /*规定子元素水平排列还是垂直排列*/
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-box-orient: vertical;
    -o-box-orient: vertical;
    box-orient: vertical;
    /*水平对齐*/
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-box-align: center;
    -o-box-align: center;
    box-align: center;
    /*垂直对齐*/
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-box-pack: center;
    -o-box-pack: center;
    box-pack: center;
  }
  .wrap a {
    display: block;
    width: 100px;
    height: 200px;
    border: 2px solid #000;
    background-color: #fcc;
  }
 </style>
</head>
<body>
 <div class="wrap">
  <a href="###" title="">HTML5学堂 - 陈林</a>
  <a href="###" title="">HTML5学堂 - 陈能堡</a>
 </div>
</body>
</html>

效果:

JavaScript

audio元素和video元素在iOS和Android中无法自动播放

2016.06.20~2016.06.24

核心内容

HTML5视音频

参考答案

音频,写法一

<audio src="music/bg.mp3" autoplay loop controls>你的浏览器还不支持哦</audio>

音频,写法二

<audio controls="controls"> 
    <source src="music/bg.ogg" type="audio/ogg"></source>
    <source src="music/bg.mp3" type="audio/mpeg"></source>
    <!-- 优先播放音乐bg.ogg,不支持在播放bg.mp3 -->
</audio>

解决视音频无法自动播放的问题,可以通过JS来触发自动播放(操作window时,播放音乐)

$(window).one('touchstart', function(){
    music.play();
})

微信下兼容处理

document.addEventListener("WeixinJSBridgeReady", function () {
    music.play();
}, false);

一点心得:

1.audio元素的autoplay属性在iOS及Android上无法使用,在PC端能够正常使用;

2.audio元素没有设置controls时,在iOS及Android会占据空间大小,而在PC端Chrome浏览器是不会占据任何空间

移动端有哪些touch事件

2016.06.20~2016.06.24

核心内容

touch事件

参考答案

当用户手指放在移动设备的屏幕上滑动会触发的touch事件;

以下支持webkit内核的浏览器:

  1. touchstart——当手指触碰屏幕时候发生。不管当前有多少只手指
  2. touchmove——当手指在屏幕上滑动时连续触发。通常我们为了防止页面的滚动,会调用event的preventDefault()可以阻止默认事件的发生,达到阻止页面滚动的效果
  3. touchend——当手指离开屏幕时触发
  4. touchcancel——系统停止跟踪触摸时会触发。

TouchEvent说明:

  1. touches:屏幕上所有手指的信息
  2. targetTouches:手指在目标区域的手指信息
  3. changedTouches:最近一次触发该事件的手指信息
  4. touchend时,touches与targetTouches信息会被删除,changedTouches保存最后一次的信息,用于计算手指信息

参数信息(changedTouches[0])

  1. clientX、clientY在显示区的坐标
  2. target:当前元素

事件响应顺序

ontouchstart > ontouchmove > ontouchend > onclick

以下支持winphone 8

  1. MSPointerDown——当手指触碰屏幕时候发生。不管当前有多少只手指
  2. MSPointerMove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面,会调用css的html{-ms-touch-action: none;}可以阻止默认情况的发生:阻止页面滚动
  3. MSPointerUp——当手指离开屏幕时触发

如何用jQuery实现两个div等高

2016.06.20~2016.06.24

核心内容

jQuery

参考答案

有时你希望无论两个 div 各自包含什么内容,它们总有相同的高度:

$('.div').css('min-height', $('.main-div').height());

这个例子设置了 min-height,意味着高度可以大于主 div 而不能小于它。然而,更灵活的方法是遍历一组元素,然后将高度设置为最高元素的高度:

var $columns = $('.column');
var height = 0;
$columns.each(function () {
  if ($(this).height() > height) {
    height = $(this).height();
  }
});
$columns.height(height);

如果你希望所有列高度相同:

var $rows = $('.same-height-columns');
$rows.each(function () {
  $(this).find('.column').height($(this).height());
});

为什么this指向全局

2016.06.20~2016.06.24

核心内容

this指向、setTimeout

参考答案

理解this的要点:关键在于将函数与函数名分开看待。同一个函数,在不同的执行方法下,会有不同的效果。

不要去看传的参数中函数的所有者,看执行函数的所有var obj = {};

obj.x = 1;
obj.y = 2;
window.x = 100;
window.y = 200;
obj.add = function () {
    alert(this.x + this.y);
}
setTimeout(obj.add,1000);//this指向window,输出为300
setTimeout(function(){//this指向obj,输出为3
    obj.add();
},1000);

如果想具体了解关于this指向问题,可以在HTML5学堂官网搜索“this”,进一步深入了解关于this指向问题

HTML5学堂小编 - 陈林&堡堡 耗时2.5h

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-06-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏hbbliyong

WPF Trigger for IsSelected in a DataTemplate for ListBox items

<DataTemplate DataType="{x:Type vm:HeaderSlugViewModel}"> <vw:HeaderSlug...

4064
来自专栏Ceph对象存储方案

Luminous版本PG 分布调优

Luminous版本开始新增的balancer模块在PG分布优化方面效果非常明显,操作也非常简便,强烈推荐各位在集群上线之前进行这一操作,能够极大的提升整个集群...

3145
来自专栏张善友的专栏

Miguel de Icaza 细说 Mix 07大会上的Silverlight和DLR

Mono之父Miguel de Icaza 详细报道微软Mix 07大会上的Silverlight和DLR ,上面还谈到了Mono and Silverligh...

2717
来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

2645
来自专栏陈仁松博客

ASP.NET Core 'Microsoft.Win32.Registry' 错误修复

今天在发布Asp.net Core应用到Azure的时候出现错误InvalidOperationException: Cannot find compilati...

4868
来自专栏我和未来有约会

Kit 3D 更新

Kit3D is a 3D graphics engine written for Microsoft Silverlight. Kit3D was inita...

2536
来自专栏转载gongluck的CSDN博客

cocos2dx 打灰机

#include "GamePlane.h" #include "PlaneSprite.h" #include "BulletNode.h" #include...

5476
来自专栏芋道源码1024

熔断器 Hystrix 源码解析 —— 断路器 HystrixCircuitBreaker

本文主要基于 Hystrix 1.5.X 版本 1. 概述 2. HystrixCircuitBreaker 3. HystrixCircuitBreaker....

5327
来自专栏一个会写诗的程序员的博客

Spring Reactor 项目核心库Reactor Core

Non-Blocking Reactive Streams Foundation for the JVM both implementing a Reactiv...

2182
来自专栏张善友的专栏

Mix 10 上的asp.net mvc 2的相关Session

Beyond File | New Company: From Cheesy Sample to Social Platform Scott Hansel...

2577

扫码关注云+社区