2

我正在使用这段代码：

$('.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/

关于如何排序的任何想法？

4

3 回答 3

1

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

于 2012-06-26T13:30:45.807 回答
1

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

唯一可能出现问题的情况是，如果您在mycls div的任何父元素上设置了position:relative 。删除那个position:relative，这样top和left指的是整个页面而不是父元素。

于 2012-06-26T13:51:00.050 回答
0 

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";
};
#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;    }
<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>

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

于 2017-03-27T20:59:51.683 回答