2016.06 第三周群问题分享

HTML5学堂

发布于 2018-03-13 06:47:59

1K00

代码可运行

文章被收录于专栏：HTML5学堂HTML5学堂

运行总次数：0

代码可运行

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内核的浏览器：

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

TouchEvent说明：

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

参数信息(changedTouches[0])

clientX、clientY在显示区的坐标
target：当前元素

事件响应顺序

ontouchstart > ontouchmove > ontouchend > onclick

以下支持winphone 8

MSPointerDown——当手指触碰屏幕时候发生。不管当前有多少只手指
MSPointerMove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用css的html{-ms-touch-action: none;}可以阻止默认情况的发生：阻止页面滚动
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

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2016-06-26，如有侵权请联系 cloudcommunity@tencent.com 删除

html5

css

javascript

本文分享自懂点君微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

html5

css

javascript

登录后参与评论

0 条评论

热度