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 条评论
登录 后参与评论

相关文章

来自专栏阮一峰的网络日志

浮动元素容器的clearing问题

在CSS规范中,浮动定位不属于正常的页面流(page flow),是独立定位的。所以,只含有浮动元素的父容器,在显示时不考虑子元素的位置,就当它们不存在一样。这...

622
来自专栏熊二哥

Bootstrap快速入门

Bootstrap学习有两个重点,一个是概念的理解,理解bootstrap是如何通过div来代替过去的table布局的;一个是常用结构的熟悉,做到需要的组件及时...

2966
来自专栏糊一笑

移动端效果之CellSwiper

写在前面 接着之前的移动端效果讲解,刚好项目中需要使用到这一效果,去饿了么的组件库看了一下效果,发现效果和微信端的cellSwiper还是有点差别的,由于项目中...

1886
来自专栏互联网杂技

前端兼容性问题总结

css兼容性问题 1、标签,不加样式控制的情况下,各自的margin 和padding差异较大。 解决方案:css里 *{margin:0;pad...

3305
来自专栏守候书阁

用vue开发一个所谓的数独

最近的后台管理系统页面,功能暂时没有新的需求,就在想首页放什么东西,最近我想到的就是放个所谓的数独,为什么是所谓的数独,因为规则不同于标准的数独,只要求每一行每...

913
来自专栏程序员的诗和远方

让文字沿着路径动起来 (SVG)

由于我对 SVG 也不是太熟悉,有些地方可能有所疏漏,有什么疑问欢迎留言,有什么写错的地方,欢迎指出哈。

3017
来自专栏编程

html编写规范

今天我为大家介绍一下html的基本知识。 什么是html html指的是超文本标记语言(Hyper Text Markup Language),它包含一系列的标...

17710
来自专栏james大数据架构

LinearLayout(线性布局)

要点: android:orientation="vertical"垂直线性布局,"horizontal"水平线性布局 android:gravity="top...

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

Blend基础-布局控件

布局 什么是布局? Panels控件(其实就是容器控件) 对内部的子控件提供了自动布局功能 可以在容器控件内继续添加容器控件(一个复杂的界面往往是多种容器控件...

1806
来自专栏小樱的经验随笔

【Android开发学习笔记之一】5大布局方式详解

Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件。 帧布局(FrameLayout):组件从...

3298

扫码关注云+社区