如果一个div的宽高是：100*100，图片的宽高是：50*500，那么如何才能让这个图片居中填满div？

最简便的方法，是通过写背景，然后cover。

并不是每个地方都适合写背景，有些地方还是img标签来的方便。纯css的解决方案并不好实现，可以通过js去计算并修改位置。如下：

给img添加data-autosize属性，并设置img的position属性
<img src="t.png" data-autosize>
默认会添加left，top来使图片居中，如果自己使用了css3的方式来居中，设置data-autosize="translate"，这样的话，将不设置样式。
<img src="t.png" data-autosize="translate">
尽量不要用css去设置img的height。可能会出现计算高度问题。
01.
02.
03.
04.
05.

下面使用css3居中。

有些情况，dom元素事先隐藏的，或者ajax请求过来的图片，这时候需要重新跑一遍js即可。

显示图片

btn.onclick = function(){
    //block
    xxx.show();
    autoImg('.wrap'); //可以指定某个区域的图片重新修改宽高
    //ajax
    $.ajax({
        success : function(){
            autoImg('.wrap')
        }
    });
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.

点击这里下载JS

简易版的移动端滑动切换。自适应，可横向竖向。使用css3动画，性能不错，简单小巧，（压缩+gzip）只有2K。

布局使用了Flex。所以就免去了js去计算宽高。案例中使用了之前写的flex布局（点击这里查看）。

基本布局如下。

<div class="swiperWrap">
    <div class="contentWrap" flex>
        <div shrink="0">1</div>
        <div shrink="0">2</div>
        <div shrink="0">3</div>
        <div shrink="0">4</div>
    </div>
</div>
01.
02.
03.
04.
05.
06.
07.
08.

js接口如下。

//直接调用
new iSwiper('.demo')
//带参数
var isw = new iSwiper('.demo',{
    speed : 500, //切换速度，默认500
    type : 'x' //滑动方向，还有y，默认x
    loop : false //是否开启循环，默认false
});
//提供如下方法
isw.to(2,200) //切换到第几个，从0开始，第二参数为本次切换的时间，可不写
isw.index() //获取当前索引值
isw.next(500) //切换到下一个，可选参数本次切换的时间
isw.prev(500) //切换到上一个，可选参数本次切换的时间
isw.prevent = false //滑动时是否阻止默认事件，默认false，不阻止
isw.transitionEnd(function ( n ){
    //每一次滑动结束会执行，这里的每一次指的是，不管有没有滑动整一列，n为当前索引
});
isw.changeEnd(function ( n ){
    //每成功滑动一列执行，n为当前索引
});
isw.touchMove(function ( e,n ){
    //滑动时执行。e为event对象，n为当前索引
});
如果需要某一块不需要滑动，添加class为"iswiper-no"即可。
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

（更多…）

首先在webpack.config.js中增加proxy内容，设置代理。

...
devServer: {
    host : '192.168.3.100',
    port: 3000,
    proxy : {
        '/ajax/*': { //只要指向/ajax/的请求，都会自动代理到下面的target的地址
            target: 'http://192.168.3.100', //对方服务器地址
            secure: false
        }
    }
}
...
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.

接着我们在请求ajax的时候，一定要请求当前服务器的路径，并不是请求对方服务器的路径。比如：

//这里请求自己服务器，如果自己服务器有端口号，同样要加上端口号
this.$http.get('http://192.168.3.100:3000/ajax/getNews.php').then(function(n){
    console.log(n.data)
})
01.
02.
03.
04.

最新解决方法，可点击这里查看。

最近做一个HTML5的活动页面，需要在页面内播放视频，并有交互动作。之前，可以在video标签内写上 webkit-playsinline 属性就可以不全屏播放，但是现在在部分Android手机和小屏的iPhone上已经失效了，看了下优酷和土豆，在Android上播放都默认全屏打开。据说在腾讯自家域名以及在白名单内的网站（比如前段时间很火的吴亦凡HTML5以及最近的穿越故宫来看你），视频可以不全屏播放。

这里有个腾讯X5专区的提问：关于微信内video标签播放视频自动全屏的提问

如果在页面内放一个隐藏的video，然后video播放再通过canvas渲染出来，看起来的确可以，但是在部分手机上video只要一播放，还是会全屏打开，而且在Android设备，video播放会置顶与任何标签之上， 所以这个方法依然不行。

方案一、通过jsmpg插件来解码video，但是这个插件好像只能解码mpeg的格式视频，而且还有一些文件编码限制，具体点击这里查看github。通过测试，在Android和ios设备均可播放，而且jsmpg提供了几个实用的Api， 不过通过js去解码视频，可能会很消耗性能。

var canvas = document.getElementById('canvas');
var player = new jsmpeg('fox.mpg', {
    canvas: canvas,
    loop : true
});
01.
02.
03.
04.
05.

（更多…）

由于微信和QQ都已经更新了Blink内核，已经全面支持flex布局了，除了个别国产浏览器，基本上可以放心使用flex了，写了一个简单的flex的布局框架，只要设置相应的属性即可。

下面是基本的使用介绍

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

首先如果需要某个元素使用flex来排版的话，需要在自身设置flex，如下所示

<div flex >
    //code	
</div>
01.
02.
03.

box：设置子元素如何去分配空间。写在子元素。（默认可设置10个box）
如果只有一个子元素设置了box:1甚至任意值，都会把盒子剩余的空间给他。
如果子元素都设置了box:1，则去平均分配盒子的空间。
如果子元素其中某个设置了box:2，则该元素是其他元素的两倍。

<div flex >
    <div box="1"></div>
    <div box="2">该元素是上面元素的两倍宽</div>
</div>
01.
02.
03.
04.

（更多…）

移动端模拟滚动（支持PC端高级浏览器），支持横向和竖向滚动。

DOM结构如下：

<div class="wrap">
    <div class="content">
        //内容-必须为第一个子元素
    </div>
</div>
//如果需要横向滚动，标签写上x属性即可
<div class="wrap" x >
    <div class="content">
        //code
    </div>
</div>
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.

JS调用接口：

//传入元素的id或者class
var s = new iScroll('.scrollWrap');
s.top(function(a){
    //达到顶部执行,this为当前dom，a代表移动的距离
});
s.bottom(function(a,b){
    //达到底部执行,this为当前dom，a代表移动的距离，b代表总的滑动距离
});
s.resize(); //用于添加内容或者自适应的时候，重新计算滚动条高度 
01.
02.
03.
04.
05.
06.
07.
08.
09.

看个例子，默认滚动：

（更多…）

给任意图片添加爆炸效果，原理类似这篇文章（点击这里）。

调用：

//class或者id
boom.init('.img');
//或者
boom.init(this);
01.
02.
03.
04.

点击下面图片查看效果

点击这里下载JS

使用了swiper插件，建议使用手机浏览此页面。

点击这里下载JS

表格排序（数字排序，字符串排序，日期排序）。

点击下面的表头查看效果。

源码：

（更多…）

css：

.c_alert_dialog *{box-sizing:border-box}.c_alert_dialog{-webkit-tap-highlight-color:rgba(0,0,0,0);color:#111;position:fixed;left:0px;top:0px;z-index:9999;width:100%;height:100%;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}.c_alert_inner .c_alert_mask{background:none}.c_alert_inner .c_alert_wrap{background:rgba(0,0,0,.88);color:#fff}.c_alert_mask{position:absolute;left:0;top:0px;width:100%;height:100%;z-index:505;background:rgba(0,0,0,.78);opacity:0;visibility:hidden;-webkit-transition:all .5s ease}.dialog_open .c_alert_mask{opacity:1;visibility:initial}.c_alert_wrap{color:#444;z-index:1200;max-width:400px;position:relative;background:#fff;height:auto;border-radius:10px;overflow:hidden;box-shadow:0 2px 20px rgba(0,0,0,.25);font-size:15px;opacity:0}.c_alert_title{padding:17px 14px 0 14px;line-height:1;margin-bottom:-2px;text-align:left;font-weight:bold;font-size:16px;position:relative}.c_alert_con img{vertical-align: top}.c_alert_con{text-align:left;font-size:15px;line-height:1.4;padding:12px 14px}.c_alert_title + .c_alert_con{padding:16px 14px}.c_alert_btn{border-top:1px solid #e7e7e7;overflow:hidden;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}.c_alert_btn a{font-weight:bold;line-height:1;text-align:center;color:#228BFE;text-decoration:none;-webkit-appearance:none;-webkit-tap-highlight-color:rgba(0,0,0,0);display:block;padding:13px 0;font-size:16px;margin:0;background:0 0;border:none;border-radius:0;letter-spacing:1px;cursor:pointer;border-left:1px solid #e7e7e7;width:100%;transition:all .2s ease;-webkit-transition:all .2s ease}.c_alert_btn a:first-child{border-left:none}.c_alert_btn a:active{background:#eee}.dialog_open .c_alert_wrap,.dialog_close .c_alert_wrap{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.dialog_open .c_alert_wrap{-webkit-animation-name:anim-open;animation-name:anim-open}.dialog_close .c_alert_wrap{-webkit-animation-name:anim-close;animation-name:anim-close;-webkit-animation-duration:0.3s;animation-duration:0.3s;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}.c_alert_width.c_alert_wrap{width:76%}@media screen and (max-width:800px){.c_alert_wrap{max-width:76%;border-radius:10px}}@-webkit-keyframes anim-open{0%{opacity:0;-webkit-transform:matrix3d(0.7,0,0,0,0,0.7,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.7,0,0,0,0,0.7,0,0,0,0,1,0,0,0,0,1)}2.083333%{-webkit-transform:matrix3d(0.75266,0,0,0,0,0.76342,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.75266,0,0,0,0,0.76342,0,0,0,0,1,0,0,0,0,1)}4.166667%{-webkit-transform:matrix3d(0.81071,0,0,0,0,0.84545,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.81071,0,0,0,0,0.84545,0,0,0,0,1,0,0,0,0,1)}6.25%{-webkit-transform:matrix3d(0.86808,0,0,0,0,0.9286,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.86808,0,0,0,0,0.9286,0,0,0,0,1,0,0,0,0,1)}8.333333%{-webkit-transform:matrix3d(0.92038,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.92038,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}10.416667%{-webkit-transform:matrix3d(0.96482,0,0,0,0,1.05202,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.96482,0,0,0,0,1.05202,0,0,0,0,1,0,0,0,0,1)}12.5%{-webkit-transform:matrix3d(1,0,0,0,0,1.08204,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1,0,0,0,0,1.08204,0,0,0,0,1,0,0,0,0,1)}14.583333%{-webkit-transform:matrix3d(1.02563,0,0,0,0,1.09149,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.02563,0,0,0,0,1.09149,0,0,0,0,1,0,0,0,0,1)}16.666667%{-webkit-transform:matrix3d(1.04227,0,0,0,0,1.08453,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.04227,0,0,0,0,1.08453,0,0,0,0,1,0,0,0,0,1)}18.75%{-webkit-transform:matrix3d(1.05102,0,0,0,0,1.06666,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.05102,0,0,0,0,1.06666,0,0,0,0,1,0,0,0,0,1)}20.833333%{-webkit-transform:matrix3d(1.05334,0,0,0,0,1.04355,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.05334,0,0,0,0,1.04355,0,0,0,0,1,0,0,0,0,1)}22.916667%{-webkit-transform:matrix3d(1.05078,0,0,0,0,1.02012,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.05078,0,0,0,0,1.02012,0,0,0,0,1,0,0,0,0,1)}25%{-webkit-transform:matrix3d(1.04487,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.04487,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}27.083333%{-webkit-transform:matrix3d(1.03699,0,0,0,0,0.98534,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.03699,0,0,0,0,0.98534,0,0,0,0,1,0,0,0,0,1)}29.166667%{-webkit-transform:matrix3d(1.02831,0,0,0,0,0.97688,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.02831,0,0,0,0,0.97688,0,0,0,0,1,0,0,0,0,1)}31.25%{-webkit-transform:matrix3d(1.01973,0,0,0,0,0.97422,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.01973,0,0,0,0,0.97422,0,0,0,0,1,0,0,0,0,1)}33.333333%{-webkit-transform:matrix3d(1.01191,0,0,0,0,0.97618,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.01191,0,0,0,0,0.97618,0,0,0,0,1,0,0,0,0,1)}35.416667%{-webkit-transform:matrix3d(1.00526,0,0,0,0,0.98122,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00526,0,0,0,0,0.98122,0,0,0,0,1,0,0,0,0,1)}37.5%{-webkit-transform:matrix3d(1,0,0,0,0,0.98773,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1,0,0,0,0,0.98773,0,0,0,0,1,0,0,0,0,1)}39.583333%{-webkit-transform:matrix3d(0.99617,0,0,0,0,0.99433,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.99617,0,0,0,0,0.99433,0,0,0,0,1,0,0,0,0,1)}41.666667%{-webkit-transform:matrix3d(0.99368,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.99368,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}43.75%{-webkit-transform:matrix3d(0.99237,0,0,0,0,1.00413,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.99237,0,0,0,0,1.00413,0,0,0,0,1,0,0,0,0,1)}45.833333%{-webkit-transform:matrix3d(0.99202,0,0,0,0,1.00651,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.99202,0,0,0,0,1.00651,0,0,0,0,1,0,0,0,0,1)}47.916667%{-webkit-transform:matrix3d(0.99241,0,0,0,0,1.00726,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.99241,0,0,0,0,1.00726,0,0,0,0,1,0,0,0,0,1)}50%{opacity:1;-webkit-transform:matrix3d(0.99329,0,0,0,0,1.00671,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.99329,0,0,0,0,1.00671,0,0,0,0,1,0,0,0,0,1)}52.083333%{-webkit-transform:matrix3d(0.99447,0,0,0,0,1.00529,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.99447,0,0,0,0,1.00529,0,0,0,0,1,0,0,0,0,1)}54.166667%{-webkit-transform:matrix3d(0.99577,0,0,0,0,1.00346,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.99577,0,0,0,0,1.00346,0,0,0,0,1,0,0,0,0,1)}56.25%{-webkit-transform:matrix3d(0.99705,0,0,0,0,1.0016,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.99705,0,0,0,0,1.0016,0,0,0,0,1,0,0,0,0,1)}58.333333%{-webkit-transform:matrix3d(0.99822,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.99822,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}60.416667%{-webkit-transform:matrix3d(0.99921,0,0,0,0,0.99884,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.99921,0,0,0,0,0.99884,0,0,0,0,1,0,0,0,0,1)}62.5%{-webkit-transform:matrix3d(1,0,0,0,0,0.99816,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1,0,0,0,0,0.99816,0,0,0,0,1,0,0,0,0,1)}64.583333%{-webkit-transform:matrix3d(1.00057,0,0,0,0,0.99795,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00057,0,0,0,0,0.99795,0,0,0,0,1,0,0,0,0,1)}66.666667%{-webkit-transform:matrix3d(1.00095,0,0,0,0,0.99811,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00095,0,0,0,0,0.99811,0,0,0,0,1,0,0,0,0,1)}68.75%{-webkit-transform:matrix3d(1.00114,0,0,0,0,0.99851,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00114,0,0,0,0,0.99851,0,0,0,0,1,0,0,0,0,1)}70.833333%{-webkit-transform:matrix3d(1.00119,0,0,0,0,0.99903,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00119,0,0,0,0,0.99903,0,0,0,0,1,0,0,0,0,1)}72.916667%{-webkit-transform:matrix3d(1.00114,0,0,0,0,0.99955,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00114,0,0,0,0,0.99955,0,0,0,0,1,0,0,0,0,1)}75%{-webkit-transform:matrix3d(1.001,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.001,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}77.083333%{-webkit-transform:matrix3d(1.00083,0,0,0,0,1.00033,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00083,0,0,0,0,1.00033,0,0,0,0,1,0,0,0,0,1)}79.166667%{-webkit-transform:matrix3d(1.00063,0,0,0,0,1.00052,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00063,0,0,0,0,1.00052,0,0,0,0,1,0,0,0,0,1)}81.25%{-webkit-transform:matrix3d(1.00044,0,0,0,0,1.00058,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00044,0,0,0,0,1.00058,0,0,0,0,1,0,0,0,0,1)}83.333333%{-webkit-transform:matrix3d(1.00027,0,0,0,0,1.00053,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00027,0,0,0,0,1.00053,0,0,0,0,1,0,0,0,0,1)}85.416667%{-webkit-transform:matrix3d(1.00012,0,0,0,0,1.00042,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00012,0,0,0,0,1.00042,0,0,0,0,1,0,0,0,0,1)}87.5%{-webkit-transform:matrix3d(1,0,0,0,0,1.00027,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1,0,0,0,0,1.00027,0,0,0,0,1,0,0,0,0,1)}89.583333%{-webkit-transform:matrix3d(0.99991,0,0,0,0,1.00013,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.99991,0,0,0,0,1.00013,0,0,0,0,1,0,0,0,0,1)}91.666667%{-webkit-transform:matrix3d(0.99986,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.99986,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}93.75%{-webkit-transform:matrix3d(0.99983,0,0,0,0,0.99991,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.99983,0,0,0,0,0.99991,0,0,0,0,1,0,0,0,0,1)}95.833333%{-webkit-transform:matrix3d(0.99982,0,0,0,0,0.99985,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.99982,0,0,0,0,0.99985,0,0,0,0,1,0,0,0,0,1)}97.916667%{-webkit-transform:matrix3d(0.99983,0,0,0,0,0.99984,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.99983,0,0,0,0,0.99984,0,0,0,0,1,0,0,0,0,1)}100%{opacity:1;-webkit-transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}}@-webkit-keyframes anim-close{0%{opacity:1}100%{opacity:0;-webkit-transform:scale3d(0.8,0.8,1)}}
01.

调用：

Dialog.init('测试文字') //默认
Dialog.init('测试文字',2000) //第二个参数时间，2秒后自动关闭
Dialog.init('测试文字',{
    time : 1000,  //自动关闭
    maskClick : false, //点击背景层是否关闭弹层
    mask : false, //是否显示遮罩
    title : '是否删除？', //添加标题
    index : 1,  //设置索引，用于close方法
    addClass : 'bgRed', //追加class
    style : 'color:red', //追加css
    button : { //按钮
        确定 : function(){
            Dialog.init('你点击了确定',1000);
            Dialog.close(this);
        },
        取消 : function(){
            Dialog.init('你点击了取消',1000)
            Dialog.close(this);
        }
    },
    before : function(){
        //this.classList.add('autoWidth')
        //dom创建成功，但未渲染
        console.log('创建成功',this);
    },
    after : function(){
        console.log('关闭成功',this)
    },
    onload : function(){
        console.log('加载成功',this)
    }
});
//关闭
Dialog.close(this); //在内部使用可直接使用this
Dialog.close(1,function(){
    //手动关闭弹层，第一个参数为索引值（配合上面index参数使用）；
    //第二个参数为回调
});
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.

举例：

（更多…）