记录：模糊效果图层覆盖搭配js实现拖拽时候无缝对齐

进行模糊的时候，对背景图上覆盖一张一模一样的图片背景，然后通过计算x,y的对应位置，实现局部模糊的效果。

div:before {
    position: absolute;
    left: 0px;
    top: 0px;
    right: auto;
    bottom: auto;
    width: 100%;
    height: 100%;
    background: url(../images/photos/bg06.jpg) no-repeat;
    content: '';
}
div.a1:before{
    background-position: -1070px -290px;
    filter: blur(5px);
}

通过js动态计算x和y的距离，从而达到大屏小屏适配和拖拽适配

    function LoadImageWidth(_imgPath,_success) {
        var img=new Image();
        img.src=_imgPath;
        img.onload=function(){
            _success(img.width)
        }
    }
    function InitImagePosition(list,_imgWidth){
        var inner=document;
        //创建style标签
        $('<style id="myVague"></style>').appendTo('head')
        function JSXY(){
            var innerWidth=inner.body.clientWidth;//容器宽度
            var x=((_imgWidth-innerWidth)/2)
            //计算图片实际的x
            var allstyle='';
            for(var i=0;i<list.length;i++) {
                var name=list[i]
                var box=$('#'+name)
                var boxX=x+$(box).offset().left;
                box.addClass('js_'+name)
                //创建class
                var cls='.changbox a.js_'+name+':before';
                cls+='{background-position: -'+boxX+'px -'+($(box).offset().top-100)+'px;}'
                allstyle+=cls

            }
            $('#myVague').html(allstyle);
        }
        $(window).resize(function(){
            JSXY();
        });
        JSXY();
    }
    var _imgPath='images/photos/bg06.jpg'
    LoadImageWidth(_imgPath,function(_width){
        var _list=['a1','a2','a3','a4','a5']
        InitImagePosition(_list,_width)
    })