图片的局部高斯模糊效果-JS偏移计算实现实例页面

回到相关文章 »

代码：

CSS代码：
.box { 
    width: 256px; height: 191px; 
    background: url(//image.zhangxinxu.com/image/study/s/s256/mm1.jpg) no-repeat; 
    position: relative; 
    overflow: hidden;
}
.drag { 
    width: 100px; height: 100px;
    background: inherit; 
    -webkit-filter: blur(5px); -moz-filter: blur(5px); filter: blur(5px); 
    cursor: -webkit-grab; cursor: -moz-grab; cursor: grab;
    position: absolute; 
    overflow: hidden;
}
.drag:active {
    cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: grabbing;
}
HTML代码：
<div class="box">
    <div id="drag" class="drag"></div>
</div>
JS代码：
var eleDrag = document.getElementById("drag");
if (eleDrag) {
    startDrag(eleDrag, eleDrag, function(x, y) {
        eleDrag.style.backgroundPosition = (-1 * x) + "px " + (-1 * y) + "px";    
    });
}

效果：