Question

我正在使用此代码：

$('.my_img').mousemove(function(e){
   $('.mycls').css("left",e.pageX-20+"px");
   $('.mycls').css("top",e.pageY-10+"px");

});

...然后

<div class="mycls">I Move</div>

...然后

<img class="my_img" src="myimg.png" />

我的问题是，如果我在这些div上面添加任何div，则位置会发生变化，mycls不再位于鼠标位置。

所以，如果我要在身体之后加上额外的div，就像这样：

<div>ONE</div>

<div>TWO</div>

...然后剩下的代码......我将失去职位：o /

有关如何对此进行排序的任何想法？

Answer 1

只需将CSS position:absolute;添加到您的可移动元素.mycls

即可

Answer 2

由于 e.pageX 和 e.pageY 值是相对于整个页面的，因此添加新元素不应影响您的代码。如果您将 top 和 left 设置为元素，则会定义它与页面顶部和左侧的距离。

唯一可能出现问题的情况是，如果您在 mycls div的任何父元素上设置 position：relative 。删除位置：relative ，以便 top 和 left 引用整个页面，而不是父元素。

Answer 3

＆＃13;

var img = document.getElementById("my_img");
var cls = document.getElementById("mycls");
img.onmousemove = function(e){
   cls.style.left = e.clientX-20 + "px";
   cls.style.top =  e.clientY-10 + "px";
};

＆＃13;

#mycls {
  background-color: rgba(255,255,255,0.8);
  position: fixed;
  left: 0;
  top: 0;
  font-family: sans-serif;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid rgba(0,0,0,0.8);
}
#my_img {
  width: 420px;
  height: 200px;
  background-color: #333;    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="my_img">
  <div id="mycls">
  Your message here
  </div>
</div>

＆＃13;

这是我过去如何做到这一点的一个例子......重要的是正在移动的div是容器的子级，因此它触发的任何mousemove事件都会冒泡到父级以进行处理

JQuery Mousemove div类e.pageX的位置

3 个答案: