var Emblem = {
    init: function(el) {
        var element = document.querySelector(el);
        var text = element.innerHTML;
        element.innerHTML = '';
        for (var i = 0; i < text.length; i++) {
            element.insertAdjacentHTML("beforeend", '<span style="transform:rotateZ('+(360/text.length)*(i)+'deg);-webkit-transform:rotateZ('+(360/text.length)*(i)+'deg);position: absolute;display: inline-block;left: 0;right: 0;top: 0;bottom: 0;text-transform: uppercase;">'+text[i]+'</span>');
        }
    }
};
Emblem.init('.emblem');
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.

如果一个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.