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内核的浏览器:
- 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
- Laravel 4 小技巧两则
- [译]Laravel 5.0 之 ValidatesWhenResolved
- Python机器学习的练习七:K-Means聚类和主成分分析
- [译]Laravel 5.0 之方法注入
- [译]Laravel 5.0 之 Middleware (Filter-Style)
- [译]Laravel 5.0 之目录结构与命名空间
- Python机器学习的练习六:支持向量机
- [译]Laravel 5.0 之路由缓存
- [译]Laravel 5.0 之 表单验证类 (Form Requests)
- 如何在Python中保存ARIMA时间序列预测模型
- Laravel 5.0 发布, 海量新特性!!
- Python中的白噪声时间训练
- Python机器学习的练习五:神经网络
- 在Python中如何差分时间序列数据集
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 轻松学Pytorch-实现自定义对象检测器
- Elasticsearch 升级 7.x 版本后,我感觉掉坑里了!
- 【一起学系列】之适配器模式:还有外观模式呢
- 【翻译】200行代码讲透RUST FUTURES (5)
- Unable to preventDefault inside passive event listener
- js 停止事件冒泡 阻止浏览器的默认行为(阻止a标签跳转 )
- EmitMapper的使用小结
- js .map方法
- 【一起学系列】之模板方法:写SSO我只要5分钟
- ConcurrentDictionary线程不安全么,你难道没疑惑,你难道弄懂了么?
- 【一起学系列】之迭代器&组合:虽然有点用不上啦
- 移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法
- 使用ActionFilterAttribute 记录 WebApi Action 请求和返回结果记录
- scipy.stats连续分布的基本操作
- InvocationHandler中invoke方法中的第一个参数proxy的用途