<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style>
body{overflow:hidden;}
#box1{position:absolute;top:100px;left:670px;width:100px;height:20px;background:red;}
#box2{position:absolute;top:120px;left:670px;width:100px;height:20px;background:blue;}
#box3{position:absolute;top:0;left:50%;width:1px;height:600px;background:red;}
#box4{position:absolute;top:0;left:37.5%;width:1px;height:600px;background:red;}
#tip{position:absolute;background:green;color:white;}
</style>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
<div id="tip"><span id="tip-horz"></span>|<span id="tip-vert"></span></div>
<script>
var throttle = function(fn, delay, immediate, debounce) {
var curr = +new Date(),
last_call = 0,
last_exec = 0,
timer = null,
diff,
context,
args,
exec = function() {
last_exec = curr;
fn.apply(context, args);
};
return function() {
curr = +new Date();
context = this;
args = arguments;
diff = curr - (debounce ? last_call : last_exec) - delay;
clearTimeout(timer); if (debounce) {
if (immediate) {
timer = setTimeout(exec, delay);
} else if (diff >= 0) {
exec();
}
} else {
if (diff >= 0) {
exec();
} else if (immediate) {
timer = setTimeout(exec, -diff);
}
} last_call = curr;
}
}; var debounce = function (fn, delay, immediate) {
return throttle(fn, delay, immediate, true);
}; var viewportW = document.documentElement.clientWidth
var initialized = false var oldx, oldy;
document.onmousemove = throttle(function(e) {
var posx = 0,
posy = 0,
e = e || window.event,
get = function(id) {
return document.getElementById(id);
},
box1 = get('box1'),
box2 = get('box2'),
tip = get('tip'),
tipHorz = get('tip-horz'),
tipVert = get('tip-vert'); if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
} else if (e.clientX || e.clientY) {
posx = e.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
posy = e.clientY + document.documentElement.scrollTop + document.body.scrollTop;
}; tip.style.top = +posy + 15 + 'px';
tip.style.left = +posx + 15 + 'px'; if (oldx == null || oldy == null) {
oldx = posx;
oldy = posy;
return;
} if (posx - oldx == 0) {
tipHorz.innerHTML = '----';
}
if (posx - oldx > 0) {
tipHorz.innerHTML = 'right';
box1.style.left = parseFloat(box1.offsetLeft) + (posx - oldx)/4 + 'px';
box2.style.left = parseFloat(box2.offsetLeft) + (posx - oldx)/4 + 'px';
}
if (posx - oldx < 0) {
tipHorz.innerHTML = 'left';
box1.style.left = parseFloat(box1.offsetLeft) + (posx - oldx)/4 + 'px';
box2.style.left = parseFloat(box2.offsetLeft) + (posx - oldx)/4 + 'px';
}
if (posy - oldy == 0) {
tipVert.innerHTML = '----';
}
if (posy - oldy > 0) {
tipVert.innerHTML = 'bottom';
}
if (posy - oldy < 0) {
tipVert.innerHTML = 'top';
} oldx = posx;
oldy = posy; if (!initialized) {
box1.style.left = viewportW / 2 - 50 - (viewportW / 2 - posx) / 4 + 'px'
initialized = true
}
}, 30, false);
</script>
</body>
</html>