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

相关文章

来自专栏行者常至

(19)Struts2_表单标签

281
来自专栏一“技”之长

Java开发GUI之BorderLayout边界布局

    前面博客中所提及的例子都是针对单独的视图组件,将组件组合并布局在合适的位置才能算是完整的界面。Java中的布局采用布局管理器模式进行,提供了跨平台性,B...

622
来自专栏web前端-

JQuery事件

       focus()                 ------获得焦点事件

694
来自专栏Python攻城狮

jQuery1.jQuery简介及使用2.jQuery语法3.jQuery选择器4,jQuery 事件函数及效果显示

jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。(write less,do more.)

563
来自专栏积累沉淀

JavaScript 事件对象

一.事件对象 事件处理三部分组成:对象.事件处理函数=函数。例如:单击文档任意处。 document.onclick = function () { alert...

16810
来自专栏xingoo, 一个梦想做发明家的程序员

【前端开发系列】—— 文字阴影与样式

id与class的区别 id是这个界面唯一的元素,标识某个特定的容器,比如div等等。而class是一种样式,可以应用与多个div。 另外他们在配置CSS也是不...

1759
来自专栏木子昭的博客

<自动化办公> Python 操控 Word

虽然Word不好用, 但还必须得用它, python-docx是专门用于编辑Word文档的一个工具库, 它有两大用途, 自动化生成word文档 and 自动化...

6826
来自专栏mathor

布局管理器

 针对我们之前留下的作业来说,当缩放外层Frame窗口的大小时,内层Panel并不会随之改变大小,所以我们需要一个事件监听,让他能够随之改变,但是这样太麻烦了,...

761
来自专栏前端那些事

自制刻度尺插件-前端简易实现"腾讯信用"界面

依据我现有的知识,在前端上"简易"的实现了腾讯信用的界面,同时自己自制了一个竖直的刻度尺插件,曲线的位置可以根据传入的数值动态的改变,这次主要也想总结一下关于j...

19711
来自专栏别先生

HTML入门的简单学习

1:HTML简介     1.1:HTML(Haper Text Markup language):超文本标记语言     超文本就是指页面内可以包含图片,链接...

19410

扫描关注云+社区