console
// by zhangxinxu welcome to visit my personal website http://www.zhangxinxu.com/
// zxx.drag v1.0 2010-03-23 元素的拖拽实现
var params = {
left: 0,
top: 0,
currentX: 0,
currentY: 0,
flag: false
};
//获取相关CSS属性
var getCss = function(o, key) {
return o.currentStyle ? o.currentStyle[key] : document.defaultView.getComputedStyle(o, false)[key];
};
//拖拽的实现
var startDrag = function(bar, target, callback) {
if (getCss(target, "left") !== "auto") {
params.left = getCss(target, "left");
}
if (getCss(target, "top") !== "auto") {
params.top = getCss(target, "top");
}
//o是移动对象
bar.onmousedown = function(event) {
params.flag = true;
if (!event) {
event = window.event;
//防止IE文字选中
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) + disX, parseInt(params.top) + disY);
}
}
};
var eleDrag = document.getElementById("drag");
if (eleDrag) {
startDrag(eleDrag, eleDrag, function(x, y) {
eleDrag.style.backgroundPosition = ( - 1 * x) + "px " + ( - 1 * y) + "px";
});
}
<div class="a">
<div class="b" id="drag">
</div>
</div>
* {
padding: 0;
margin: 0;
}
.a {
width: 1920px;
height: 1080px;
background: url('http://pic1.win4000.com/wallpaper/2/587db3e9e6221.jpg') no-repeat;
position: relative;
overflow: hidden;
}
.b {
width: 500px;
height: 500px;
position: absolute;
background: inherit;
filter: blur(20px);
overflow: hidden;
cursor: -webkit-grab;
}
.b:after {
content: '';
display: block;
width: 100%;
height: 100%;
border: #fff 1px solid;
}