Call or Text
(309) 204-1072
var nodes = document.querySelectorAll('.product-grid li'),
_nodes = [].slice.call(nodes, 0);
var getDirection = function (ev, obj) {
var w = obj.offsetWidth,
h = obj.offsetHeight,
coords = getCoords(obj),
x = (ev.pageX - coords.left - (w / 2) * (w > h ? (h / w) : 1)),
y = (ev.pageY - coords.top - (h / 2) * (h > w ? (w / h) : 1)),
d = Math.round( Math.atan2(y, x) / 1.57079633 + 5 ) % 4;
return d;
};
var addClass = function ( ev, obj, state ) {
var direction = getDirection( ev, obj ),
class_suffix = "";
obj.className = "";
switch ( direction ) {
case 0 : class_suffix = '-top'; break;
case 1 : class_suffix = '-right'; break;
case 2 : class_suffix = '-bottom'; break;
case 3 : class_suffix = '-left'; break;
}
obj.classList.add( state + class_suffix );
};
_nodes.forEach(function (el) {
el.addEventListener('mouseover', function (ev) {
addClass( ev, this, 'in' );
}, false);
el.addEventListener('mouseout', function (ev) {
addClass( ev, this, 'out' );
}, false);
});
function getCoords(elem) { // crossbrowser version
var box = elem.getBoundingClientRect();
var body = document.body;
var docEl = document.documentElement;
var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
var clientTop = docEl.clientTop || body.clientTop || 0;
var clientLeft = docEl.clientLeft || body.clientLeft || 0;
var top = box.top + scrollTop - clientTop;
var left = box.left + scrollLeft - clientLeft;
return { top: Math.round(top), left: Math.round(left) };
}
