0

我已经按照一些精彩的代码在http://jsfiddle.net/fhmkf/的 div 容器中让图像跟随鼠标光标。问题是，此方法仅适用于固定在绝对左/上位置的 div 容器，并且依赖于 e.pageX 和 e.pageY 坐标。

我需要将我的 div 放置在页面的中心或将其嵌套在 div 居中。

当我尝试继续将 div 居中时，它会搞砸鼠标光标和图像。该对象只会在我将鼠标放在浏览器左上角时移动（因为它使用 e.pageX 和 e.pageY 坐标）

这是我的代码。JavaScript

var mouseX = 0, mouseY = 0, limitX = 150-15, limitY = 150-15;
$(window).mousemove(function(e){
   mouseX = Math.min(e.pageX, limitX);
   mouseY = Math.min(e.pageY, limitY);
});

// cache the selector
var follower = $("#follower");
var xp = 0, yp = 0;
var loop = setInterval(function(){
    // change 12 to alter damping higher is slower
    xp += (mouseX - xp) / 12;
    yp += (mouseY - yp) / 12;
    follower.css({left:xp, top:yp});

}, 30);

我的 CSS

.centerdiv {
    width:150px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
}

#follower{
  position : relative;
  background-color : yellow;
  width:15px;
  height:15px;
  border-radius:50px;
}


.container
{
    width:150px;
    height:150px;   
    position:absolute;
    top:0;
    left:0;
    overflow:hidden;
    border:1px solid #000000;
}

我的 HTML

<div class="centerdiv">
<div class="container">
        <div id="follower"></div>
</div>
</div>

我创建了一个 FSFiddle 来向您展示会发生什么（请注意，当您将光标移到页面的左侧和顶部边缘时，您只能移动对象）。http://jsfiddle.net/3964w/

我相信它与 e.PageX 和 e.PageY 有关，我在某处看到使用 e.ClientX 和 e.ClientY 但我不知道如何。

谢谢你。

4

2 回答 2

1

您可以使用 jQuery.offset()获取元素相对于文档的位置，然后分别从和值中减去它的left和。tope.pageXe.pageY

为了确保它保持在框内，您需要mouseX和mouseY值的下限。您可以使用Math.max或if我在下面使用的 s。

$(window).mousemove(function(e){
  var offset = $('.container').offset();
   mouseX = Math.min(e.pageX - offset.left, limitX);
   mouseY = Math.min(e.pageY - offset.top, limitY);
   if (mouseX < 0) mouseX = 0;
   if (mouseY < 0) mouseY = 0;
});

JSFiddle 演示

于 2013-09-02T22:48:14.100 回答
0

非常好的例子，我需要这个。使用您的 centerdiv 触发效果以节省一些性能并使用 position() 和 margin() 来确定您的 div 的实际位置。

var mouseX = 0, mouseY = 0, limitX = 150-15, limitY = 150-15;
var stage = $(".centerdiv"), position = stage.position();

stage.mousemove(function(e){
   mouseX = Math.min(e.pageX - position['left'], limitX);
   mouseY = Math.min(e.pageY - position['top'], limitY);
});

// cache the selector
var follower = $("#follower");
var xp = 0, yp = 0;
var loop = setInterval(function(){
    // change 12 to alter damping higher is slower
    xp += (mouseX - xp) / 12;
    yp += (mouseY - yp) / 12;
    follower.css({left:xp, top:yp});

}, 30);
于 2014-05-29T20:40:59.247 回答