css3+js：图片的局部模糊

前两篇文介绍了css3的过滤器filter用来实现图片的高斯模糊效果，还有js拖拽的功能。
要实现局部模糊就要把两者结合起来，计算位移就可以了。

实现原理

原理其实很简单，就是两张图的叠加。底部一张清晰的图，上面一个高斯模糊过的图，局部显示与下面的图片无缝重合，这样看起来就行下面的图片部分模糊了一样。

代码

var bar = document.getElementById("bar");
var target = document.getElementById("target");
startDrag(target,target, function(x,y){eleDrag.style.backgroundPosition = (-1 * x) + "px " + (-1 * y) + "px"; 
});

为实现局部模糊的回调
var eleDrag = document.getElementById("box");
if (eleDrag) {startDrag(eleDrag, eleDrag, function(x, y) {eleDrag.style.backgroundPosition = (-1 * x) + "px " + (-1 * y) + "px";    });
}*/
var getCss = function(o,key){return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];
};
// 拖拽
var startDrag = function(bar, target, callback){var params = {left: 0,top: 0,currentX: 0,currentY: 0,flag: false};if(getCss(target, "left") !== "auto"){params.left = getCss(target, "left");}if(getCss(target, "top") !== "auto"){params.top = getCss(target, "top");}bar.onmousedown = function(event){params.flag = true;if(!event){event = window.event;bar.onselectstart = function(){return false;}}var e = event;params.currentX = e.clientX;params.currentY = e.clientY;};document.onmouseup = function(){params.flag = false;if(getCss(target, "left") !== "auto"){params.left = getCss(target, "left");}if(getCss(target, "top") !== "auto"){params.top = getCss(target, "top");}};document.onmousemove = function(event){var e = event ? event: window.event;if(params.flag){var nowX = e.clientX, nowY = e.clientY;var disX = nowX - params.currentX, disY = nowY - params.currentY;target.style.left = parseInt(params.left) + disX + "px";target.style.top = parseInt(params.top) + disY + "px";if (typeof callback == "function") {callback((parseInt(params.left) || 0) + disX, (parseInt(params.top) || 0) + disY);}if (event.preventDefault) {event.preventDefault();}return false;}}
};

以上就是局部模糊的实现方法。可以直接套用。

demo演示地址

借鉴于张鑫旭大神