鼠标的位置控制
来源:互联网 发布:数据录入外包公司 编辑:程序博客网 时间:2024/05/16 03:38
div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判定为离开div,会触发onmouseout事件,这样div中的内容就不能操作了。解决的办法是当触发onmouseout事件时,先判断鼠标是否在div内,如果在,说明鼠标并没有离开div,就不删除div,否则,删除之。OK,现在问题解决了。
就是找到该div左上角和右下角坐标,判断鼠标的坐标是否在这一区域
div.onmouseout=function(event){
var div = document.getElementById("test");
<span style="color:#FF6600;">var x=event.clientX;
var y=event.clientY;
var divx1 = div.offsetLeft;
var divy1 = div.offsetTop;
var divx2 = div.offsetLeft + div.offsetWidth;
var divy2 = div.offsetTop + div.offsetHeight; </span>
if( x < divx1 || x > divx2 || y < divy1 || y > divy2){
//如果离开,则执行。。
}
后面为一些常用属性方便查找:
clientHeight 获取对象的高度,不计算任何边距、边框、滚动条,但包括该对象的补白。
clientLeft 获取 offsetLeft 属性和客户区域的实际左边之间的距离。
clientTop 获取 offsetTop 属性和客户区域的实际顶端之间的距离。
clientWidth 获取对象的宽度,不计算任何边距、边框、滚动条,但包括该对象的补白。
offsetHeight 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。
offsetLeft 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。
offsetParent 获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。
offsetTop 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置。
offsetWidth 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度。
offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。
clientX,clientY 鼠标当前相对于网页的位置,当鼠标位于页面左上角时clientX=0, clientY=0
screenX, screenY是相对于用户显示器的位置
网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的宽)
网页正文全文宽: document.body.scrollWidth
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
就是找到该div左上角和右下角坐标,判断鼠标的坐标是否在这一区域
div.onmouseout=function(event){
var div = document.getElementById("test");
<span style="color:#FF6600;">var x=event.clientX;
var y=event.clientY;
var divx1 = div.offsetLeft;
var divy1 = div.offsetTop;
var divx2 = div.offsetLeft + div.offsetWidth;
var divy2 = div.offsetTop + div.offsetHeight; </span>
if( x < divx1 || x > divx2 || y < divy1 || y > divy2){
//如果离开,则执行。。
}
后面为一些常用属性方便查找:
clientHeight 获取对象的高度,不计算任何边距、边框、滚动条,但包括该对象的补白。
clientLeft 获取 offsetLeft 属性和客户区域的实际左边之间的距离。
clientTop 获取 offsetTop 属性和客户区域的实际顶端之间的距离。
clientWidth 获取对象的宽度,不计算任何边距、边框、滚动条,但包括该对象的补白。
offsetHeight 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。
offsetLeft 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。
offsetParent 获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。
offsetTop 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置。
offsetWidth 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度。
offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。
clientX,clientY 鼠标当前相对于网页的位置,当鼠标位于页面左上角时clientX=0, clientY=0
screenX, screenY是相对于用户显示器的位置
网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的宽)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidth
var wrap = document.getElementById('wrap');var hoverDir = function(e){ var w=wrap.offsetWidth; var h=wrap.offsetHeight; 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); var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; var eventType = e.type; var dirName = new Array('上方','右侧','下方','左侧'); if(e.type == 'mouseover' || e.type == 'mouseenter'){ wrap.innerHTML=dirName[direction]+'进入'; }else{ wrap.innerHTML=dirName[direction]+'离开'; }}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);}
$(".overlayLink").bind("mouseenter mouseleave",function(e){/** the width and height of the current div **/var w = $(this).width();var h = $(this).height();/** calculate the x and y to get an angle to the center of the div from that x and y. **//** gets the x value relative to the center of the DIV and "normalize" it **/var x = (e.pageX - this.offsetLeft - (w/2)) * ( w > h ? (h/w) : 1 );var y = (e.pageY - this.offsetTop - (h/2)) * ( h > w ? (w/h) : 1 );/** the angle and the direction from where the mouse came in/went out clockwise (TRBL=0123);**//** first calculate the angle of the point, add 180 deg to get rid of the negative values divide by 90 to get the quadrant add 3 and do a modulo by 4 to shift the quadrants to a proper clockwise TRBL (top/right/bottom/left) **/var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180 ) / 90 ) + 3 ) % 4;/** do your animations here **/ switch(direction) { case 0: /** animations from the TOP **/ break; case 1: /** animations from the RIGHT **/ break; case 2: /** animations from the BOTTOM **/ break; case 3: /** animations from the LEFT **/ break;}});
var direction = Math.round( Math.atan2(y, x) / 1.57079633 + 5 ) % 4
0 0
- 鼠标的位置控制
- 用c#实现控制鼠标位置的方法 (转载)
- 用c#实现控制鼠标位置的方法 (转载)
- 鼠标的位置
- 鼠标光标的位置,
- 获得鼠标的位置
- 鼠标的位置
- 获取鼠标的位置
- 控制控件出现在鼠标位置
- 控制台上识别鼠标点击位置坐标
- 控制控件出现在鼠标位置
- 点击 鼠标 图片跟着鼠标的位置
- 控制鼠标的样式
- js获取鼠标的位置
- javascript获取鼠标的位置
- js 获取鼠标的位置
- js 获取鼠标的位置
- js 获取鼠标的位置
- 杂记乱弹20140826
- Input Event 模块
- Unity 导出切片精灵
- Android中ListView如何获取列表中选中的CheckBox
- iOS 应用开发入门指南,中文教程
- 鼠标的位置控制
- android中ListView控件&&onItemClick事件中获取listView传递的数据
- 【个人机房重构】—— 抽象工厂+反射+配置文件详解以及错误分析
- 数据库将字符串转换为多行
- Android多线程及异步任务消息处理机制(一)--Handler的使用
- aop,spring aop,aspectj区别与联系
- 测试结果分析
- 窗口的消息处理
- NYOJ-求转置矩阵问题