烈日骑行的豆知识

8596054973_3e2080fa20_b

1、获取图片的平均颜色
在网页图片未加载时,提供一个与图片近似的颜色作为背景是个不错的方法。
中,直接将图片大小调整到 1×1,就可以得到该图片的平均颜色啦。

2、为动画元素强制打开 GPU 加速
现如今页面上的动画效果越来越丰富,
为了更为平滑的效果与更佳的性能考虑,
我们应为参与动画的元素加上 translate3d()
以强制开启 GPU 加速的支持。

.animation {
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

3、position:fixedtransform:translate3d 的冲突
这是 Webkit 核心一个很奇怪的 bug,当元素设定了 transform:translate3d
此时它本身或其子辈的 position:fixed 会失效。
(特别留意是否由上一条导致)

4、禁用戴尔商务台式机的内置喇叭
方法一:
1)在“设备管理器”中点击“查看”,并选择“显示隐藏的设备”。
2)展开“非即插即用驱动程序”,找到“Beep”。
3)右键“属性”,在“驱动程序”一栏,停止并禁止启动。
方法二:
如果以上方法不管用,请直接拔掉内置喇叭的电源线……

5、iOS 页面禁用电话拨打
通过 支持的 Meta 标签实现。

<meta name="format-detection" content="telephone=no">

6、获取元素 transform
当我们试图使用 获取元素 transform 数值时,
实际上拿到的是其 matrix3d() 矩阵。
为了更加方便地使用数值,我们可以将其转为数组,再进行操作。

function matrixToArray(str) {
  return str.split('(')[1].split(')')[0].split(',');
}
matrixToArray('rgba(0, 0, 0, 0.5)'); // => ['0', '0', '0', '0.5']
matrixToArray('matrix(1, 0, 0, 1, -770, 0)'); // => ['1', '0', '0', '1', '-770', '0']

7、$.when() 传递 deferred 数组

var urls = ['#', '#', '#'];
  function loadJson(){
    var dfs = [];
    for(var i = 0; i < urls.length; i++) {
      dfs.push($.getJson(urls[i]));
    }
    return dfs;
  }
  var jsons = loadJson();
  $.when.apply($, jsons).done(function() {
    //do something
  });

8、使文件输入框仅能选择某种文件类型
input 加上accept 属性即可,常见文件类型如下:

<input type="file" accept="application/pdf, application/vnd.ms-excel" /><!-- pdf/excel -->
<input type="file" accept="image/gif, image/jpeg, image/png" /><!-- image -->

可惜的是,兼容性还要再等等。

9、全屏背景视频
注意:根据视频与容器的实际尺寸,
min-widthmin-heightmax-widthmax-height可能需要调整。

0

10、修改视频地址后自动播放
通过修改 videosource 标签的“src”属性,可以修改视频的播放地址,
但并不会自动切换到新视频进行播放,还需要 load() 一下:

$('video')[0].load();
$('video')[0].play(); //no need if set video to "autoplay"

【相关资料】
0、j j miller – beans◃flickr(题图)

无觅相关文章插件,快速提升流量

1 个回应

  1. 蓝星天宇 2016年09月10日 / 15:47

    7+ Taskbar Tweaker v5.2 最新版存在多处简中汉化遗漏,期待博主能抽空帮忙完善一下,谢谢!!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Time limit is exhausted. Please reload CAPTCHA.