根据传入的对象定位div位置

最新推荐文章于 2021-08-03 17:58:38 发布

原创最新推荐文章于 2021-08-03 17:58:38 发布 · 591 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

本文介绍了一种使用JavaScript根据目标对象动态调整提示框位置的方法。通过获取目标对象的位置信息，实现提示框随鼠标移动而更新位置的功能，适用于网页交互设计。

根据传入的对象定位div位置

        .moveTip {
       background-position:left;!important;padding-left:20px;
       }
   </style>

<div id="moveTip" style="position: absolute; width: 120px; left: 50px; top: 30px;display: none;background-color: #fff" >
       <p class="green moveTip">招投标情况</p>
       <p class="red moveTip">总投资额(万元)</p>
       <p class="green moveTip">资金到账比例</p>
   </div>

js 部分

function showMoveTip(obj){
       var top = obj.getBoundingClientRect().top + obj.offsetHeight;
       var left = obj.getBoundingClientRect().left + obj.offsetWidth;
       $('#moveTip').css({'left':left,'top':top});
   $("#moveTip").show();
}