Question

目前我有一些jQuery代码告诉名为div的{{1}}跟随我的光标。我从a post on stack overflow学到了如何实现这一目标。

我稍微修改了脚本以满足我自己的要求。但是，当我向small-circle课程添加另一个big-circle时，会出现问题。似乎正在发生的事情是，container的{{1}}不允许在id轴上的small-circle2内移动。我认为它与

有关

big-circle2

x和var mouseXval = 0, mouseYval = 0, limitX = 120-30, limitY= 120-30;值可能需要更改，因为我正在添加另一个名为limitX的{{1}}。所以我尝试通过将limitY添加到div来尝试此方法，但唯一改变的是圈子的位置。 big-circle2没有跟踪60轴上的光标。仍然只有limitX = 120-60, limitY= 120-60;轴。

我认为可能的解决方案可能是small-circle2和x轴内的数学运算。另一个问题可能是尝试在y内添加多个圈子。

这是fiddle.

谢谢！

Answer 1

Thax到@blex我能看到我离开的地方。事实证明，limitX和limitY中的数学没有任何问题，并且它不是容器问题。我在想什么！

问题出现在pageOffset变量

中

// issue with selecting both classes
    var pageOffset = $(".big-circle, .big-circle2").offset();

此处的问题是同时选择".big-circle, .big-circle2"来触发offset()方法。我应该使用offset()关键字来触发我在上面的两个圈子中的任何一个，而不是选择每个班级然后应用this。

// use `this` to trigger the elements I hover on
    var pageOffset = $(this).offset();

当用户将鼠标移到".big-circle, .big-circle2"上时，jQuery会触发一个传递给mousemove事件的回调函数。一旦我们的回调被触发，jQuery就会将当前范围设置为发起事件的DOM元素，在这种情况下是.big-circle和.big-circle2。关于所有这一切的很酷的部分是，jQuery使我们能够访问使用mousemove关键字发起this事件的元素。

所以我们设置var offsetPage = $(this).offset();，我们的big-circle2现在有一个小圆圈，后面是光标。

// jQuery sets the scope of callback to `big-circle, big-circle2`
$(".big-circle, .big-circle2").mousemove(function(event){
// `this` accesses our elements 
var pageOffset = $(this).offset();
});

Updated fiddle

在mousemove上的div问题之后循环

1 个答案: