html5 js获取鼠标坐标,使用JS检测鼠标相对于DIV元素的位置

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

//not making interfaces today

"use strict";

var attractive = {

new: function(target, radius, action) {

var on = function(e) {

var box = target.getBoundingClientRect(),

percent = function(n, of) {

return Math.floor((n / of) * 100);

},

right = window.innerWidth - box.right,

bottom = window.innerHeight - box.bottom;

//where around the box is the cursor?

var is = {

left: e.clientX < box.left,

right: e.clientX > window.innerWidth - right,

top: e.clientY < box.top,

bottom: e.clientY > window.innerHeight - bottom,

//special

get center() {

//not any of these

return [

this.left,

this.right,

this.top,

this.bottom

].every(function(test) {

return !test;

});

}

};

var logging = true,

data = {

center: false,

aproachX: false,

aproachY: false,

directionX: false,

directionY: false,

threshold: []

};

if (is.left && !is.top && !is.bottom) {

var per = 100 - percent(e.clientX, box.left);

if (logging) {

target.innerHTML = '

left: ' + per + '%

';

}

if (action) {

action(Object.assign({

aproachX: per,

directionX: 'left'

}, data));

}

}

if (is.left && is.top) {

var perY = 100 - percent(e.clientX, box.left),

perX = 100 - percent(e.clientY, box.top);

if (logging) {

target.innerHTML = '

top: ' + perX + '%,
left: ' + perY + '%

';

}

if (action) {

action(Object.assign({

aproachX: perX,

aproachY: perY,

directionX: 'left',

directionY: 'top'

}, data));

}

}

if (is.top && !is.left && !is.right) {

var per = 100 - percent(e.clientY, box.top);

if (logging) {

target.innerHTML = '

top: ' + per + '%

';

}

if (action) {

action(Object.assign({

aproachY: perY,

directionY: 'top'

}, data));

}

}

if (is.right && !is.top) {

var per = percent(e.clientX - box.right, right);

if (logging) {

target.innerHTML = '

right: ' + per + '%

';

}

if (action) {

action(Object.assign({

aproachX: perX,

directionX: 'right'

}, data));

}

}

if (is.right && is.top) {

var perY = percent(e.clientX - box.right, right),

perX = 100 - percent(e.clientY, box.top);

if (logging) {

target.innerHTML = '

top: ' + perX + '%,
right: ' + perY + '%

';

}

if (action) {

action(Object.assign({

aproachX: perX,

aproachY: perY,

directionX: 'top',

directionY: 'left'

}, data));

}

}

if (is.bottom && !is.left && !is.right) {

var per = percent(e.clientY - box.bottom, bottom);

if (logging) {

target.innerHTML = '

bottom: ' + per + '%

';

}

if (action) {

action(Object.assign({

aproachY: perY

}, data));

}

}

if (is.right && is.bottom) {

var perX = percent(e.clientX - box.right, right),

perY = percent(e.clientY - box.bottom, bottom);

if (logging) {

target.innerHTML = '

bottom: ' + perY + '%,
right: ' + perX + '%

';

}

if (action) {

action(Object.assign({

aproachX: perX,

aproachY: perY

}, data));

}

}

if (is.left && is.bottom) {

var perX = 100 - percent(e.clientX, box.left),

perY = percent(e.clientY - box.bottom, bottom);

if (logging) {

target.innerHTML = '

bottom: ' + perY + '%,
left: ' + perX + '%

';

}

if (action) {

action(Object.assign({

aproachX: perX,

aproachY: perY

}, data));

}

}

if (is.center) {

if (logging) {

target.innerHTML = '

Center

';

}

if (action) {

action(Object.assign({

aproachX: 0,

aproachY: 0,

center: true

}, data));

}

}

},

off = function(e) {

target.parentNode.removeEventListener('mousemove', on, false);

//clear

target.innerHTML = '';

};

window.onresize = function() {

off();

settimeout(function() {

on();

});

};

target.parentNode.onmousemove = on;

target.parentNode.onmouseout = off;

}

};

var box = document.querySelector('.box');

attractive.new(box, 20, function(x, y) {

console.log(x, y);

});