Edit in JSFiddle

<div>
 blur(0px)：
    <img id="originImg"  src="http://lailife.u.qiniudn.com/xiaolai.jpg" alt="原图">
</div>

<div>
    blur(3px)：
    <img id="filter-blur" src="http://lailife.u.qiniudn.com/xiaolai.jpg" alt="静态迷糊">
</div>    

<div>
    blur(20px)：
    <img id="xiaolai"  src="http://lailife.u.qiniudn.com/xiaolai.jpg" alt="动态模糊">
</div>    

#filter-blur {
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: blur(3px);
}

    // 配置
    var blur = {
            value: 10,         // 当前值
            maxValue: 20,  // 最大值
            minValue: 0,    // 最小值
            step: 1,            // 每次变化的值
            delay: 100,     // 定时器间隔
            increase: true // 默认自增
        }
        // 不同浏览器前缀
    var browserPrefix = ['webkit', 'moz', 'o', 'ms'];
    var xiaolai = document.getElementById('xiaolai');
    var interval = setInterval(function() {
        // 判断增还是减
        blur.value += blur.increase ? blur.step : -blur.step;
        // 达到最大值，设为减
        if (blur.value === blur.maxValue) {
            blur.increase = false;
        }
        // 达到最大值，设为增
        if (blur.value === blur.minValue) {
            blur.increase = true;
        }
        // 设置含不同浏览器前缀的 filter 属性
        browserPrefix.forEach(function(element, index, array) {
            var key = '-' + element + '-filter';
            var val = 'blur(' + blur.value + 'px)';
            xiaolai.style[key] = val;
        })
        // 无浏览器前缀，向后兼容
        xiaolai.style['filter'] = 'blur(' + blur.value + 'px)';
    }, blur.delay);