本文为
H5EDU
机构官方的
HTML5
培训教程,主要介绍判断鼠标进入元素的方向
JavaScript强化教程
本文主要介绍当鼠标滑过一个元素,我们判断鼠标进入的方向,
2.根据构造监听事件的回调函数。
JavaScript强化教程
本文主要介绍当鼠标滑过一个元素,我们判断鼠标进入的方向,
第一步给给要监听的元素添加一个事件监听 以wrap为例。
if(window.addEventListener){
wrap.addEventListener('mouseover',hoverDir,false);
wrap.addEventListener('mouseout',hoverDir,false);
}else if(window.attachEvent){
wrap.attachEvent('onmouseenter',hoverDir);
wrap.attachEvent('onmouseleave',hoverDir);
}
根据浏览器的不同兼容监听事件
2.根据构造监听事件的回调函数。
var hoverDir = function(e){
var w=wrap.offsetWidth; //对象可见宽高//offsetLeft 边框高度
var h=wrap.offsetHeight;
// clientX鼠标指针向对于浏览器页面(或客户区)的水平坐标。
// offsetLeft 对象对于(父类容器)容器的距离
var x=(e.clientX - wrap.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
var y=(e.clientY - wrap.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
//x,y获取相对元素中心点直角坐标系的左边
var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI))) / 90) + 3) % 4;
//通过坐标计算出符合方向的象限,与方向数组的下标对应
var eventType = e.type;
var dirName = new Array('下方','左侧','下、上方','you侧');
if(e.type == 'mouseover' || e.type == 'mouseenter'){
wrap.innerHTML=dirName[direction]+'进入';
}else{
wrap.innerHTML=dirName[direction]+'离开';
}
}
//根据事件的类型 判断是 鼠标进入还是移出