pageX、pageY及父元素的页面坐标使提示框跟随鼠标移动

最新推荐文章于 2023-12-23 15:09:20 发布

zhifeng687

最新推荐文章于 2023-12-23 15:09:20 发布

阅读量1.4k

点赞数

分类专栏： javascript

javascript 专栏收录该内容

52 篇文章 0 订阅

订阅专栏

提示框相对父元素的定位，要计算提示框的left和top属性。所以公式应该为提示框的相对坐标=鼠标的页面坐标-父元素的页面坐标

计算鼠标的页面坐标：

event.pageX

event.pageY

计算父元素的页面坐标：

首先写一个js获取元素到页面顶部和左部距离的方法

	function getElementPosition(elem){
			var elemTop = elem.offsetTop;//获得elem元素距相对定位的父元素的top
			var elemLeft = elem.offsetLeft;
			elem = elem.offsetParent;//将elem换成起相对定位的父元素
			while(elem!=null){//只要还有相对定位的父元素
				elemTop +=elem.offsetTop;//获得父元素 距他父元素的top值,累加到结果中
				elemLeft += elem.offsetLeft;
				elem = elem.offsetParent;//再次将elem换成他相对定位的父元素上;
			}
			return {
				elemTop: elemTop,
				elemLeft: elemLeft
			};
		}

参考： js中获取页面任意元素距页面顶部的总距离

参考：阮一峰的博客用Javascript获取页面元素的位置

//获取父元素的页面坐标
var parentPosition =  getElementPosition(document.getElementById("funnel-chart-canvas"));
for(i=0;i<len-1;i++){
			   (function(i){
			   document.getElementById(rateId[i]).onmouseover = function(evt){
				  				  
				   $('#tip').empty();
				   if(tureRate[i]>yzRate[i])
					   tipContent = '状态：正常<br>流程完成率实际值：'+toPercent(tureRate[i])+'%<br>流程完成率指导值：'+toPercent(yzRate[i])+'%';
				   else
					   tipContent = '状态：<span style="color:red;font-size:14px;">异常</span><br>流程完成率实际值：'+toPercent(tureRate[i])+'%<br>流程完成率指导值：'+toPercent(yzRate[i])+'%';
				   $('#tip').append(tipContent);
				   $('#tip').css("display","block");
				   
				  }			  
			   }(i));
			   document.getElementById(rateId[i]).onmousemove = function(evt){
				    var pageX = event.pageX;
				    var pageY = event.pageY;
				    if(pageX === undefined){
				         pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
				    }    
				    if(pageY === undefined){
				         pageY = event.clientY +(document.body.scrollTop || document.documentElement.scrollTop);
				    }
				   $('#tip').css({
				           'top' : (pageY-parentPosition.elemTop+15) + 'px',
                           'left': (pageX-parentPosition.elemLeft+15)+ 'px'
				       });

			   }			
			   document.getElementById(rateId[i]).onmouseout = function(evt){
				   $('#tip').hide();
			   }
			   
		   }

当父元素就是body,即父元素的距离页面顶部和页面左部的距离为0时，可以不用减去父元素的页面坐标，即使用以下代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery鼠标经过淡入显示提示框 演示</title>
<script type="text/JavaScript" src="../js/jquery-1.7.2.min.js"></script>
<style type="text/css">
.div{ border:1px solid #0000FF; float:left; width:200px; height:200px; margin:10px;}
div#tip{ position:absolute; width:100px; height:auto; border:1px solid #00CC66;}
.div1{border:0;cursor:pointer;width:auto; height:auto;}
</style>
</head>
<body>
<div id="tip" style="display:none">提示内容</div>
<div class="div"></div>
<div class="div"></div>
<div class="div div1">enenba</div>
<script type="text/javascript">
 $(document).ready(function(){
  $('.div').hover(
   function(){
    $('#tip').fadeIn('slow');
   }
  );
  
  $('.div').mousemove(function(e){
   var top = e.pageY+5;
   var left = e.pageX+5;
   $('#tip').css({
    'top' : top + 'px',
    'left': left+ 'px'
   });
  });
  
  $('.div').mouseout(function(){
   $('#tip').hide();
  });
  
 });
</script>
</body>
</html>

参考 jquery 鼠标停留显示提示框，提示框位置跟随鼠标移动

当父元素的父元素即为body时，可以直接使用父元素的scrollTop作为父元素的页面坐标，可以参考如下代码
javascript 跟随鼠标移动的提示框的一个小demo

js获取一个元素到页面顶部和左部的距离

var getPos=function(o){//取元素坐标
    var x = 0, y = 0;
    do{
        x += o.offsetLeft;
        y += o.offsetTop;
    }while(o=o.offsetParent);
    return {'x':x,'y':y};
}

jquery 获取一个元素到页面顶部的距离

var X = $('#DivID').offset().top;

zhifeng687

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
pageX、pageY及父元素的页面坐标使提示框跟随鼠标移动

提示框相对父元素的定位，要计算提示框的left和top属性。所以公式应该为提示框的相对坐标=鼠标的页面坐标-父元素的页面坐标计算鼠标的页面坐标：event.pageXevent.pageY计算父元素的页面坐标：首先写一个js获取元素到页面顶部距离的方法
复制链接

扫一扫

专栏目录