Javascript 使用单击和悬停事件在jquery中创建虚拟鼠标垫

嗨，朋友们，我对javascript和J查询非常陌生。现在我想创建虚拟鼠标垫。我创建了两个div，一个用于鼠标垫，第二个用于容器中的容器，另一个div用作游标（类名为follower）。 在鼠标垫div中，鼠标移动随动件div相对于鼠标位置移动。现在，我想使用虚拟光标生成单击事件，即使用跟随器单击按钮。 按钮1 按钮2 鼠标垫

这是我的js代码

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

// 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);
    yp += (mouseY - yp) ;
    follower.css({left:xp, top:yp});

    }, 30);
$('.buttons span').bind('click',function(){
    alert($(this).attr('title'));  

  });

var mouseX=0，mouseY=0，limitX=150-15，limitY=150-15；
$（'.container1'）.mousemove（函数（e）{
var offset=$（'.container1'）.offset（）；
mouseX=Math.min（e.pageX-offset.left，limitX）；
mouseY=Math.min（e.pageY-offset.top，limitY）；
mouseX=mouseX*3；
mouseY=mouseY*3；
如果（mouseX<0）mouseX=0；
如果（mouseY<0）mouseY=0；
});
//缓存选择器
var follower=$（“#follower”）；
var xp=0，yp=0；
var loop=setInterval（函数（）{
//更改12以更改阻尼值越高，速度越慢
xp+=（mouseX-xp）；
yp+=（鼠标-yp）；
css（{left:xp，top:yp}）；
}, 30);
$（'.buttons span'）.bind（'click'，function（）{
警报（$（this.attr（'title'））；
});

JSbin链接

代码

演示

我想使用跟随器生成点击事件（在鼠标垫中移动） 有人能解决如何生成假点击事件的问题吗

---

提前感谢您使用本文中的一些碰撞检测代码，因此以下答案可能有效（未测试，说明见注释）：

var overlaps=（函数（）{//这是冲突检测代码
函数getPositions（elem）{
变量位置、宽度、高度；
pos=$（elem.position（）；
宽度=$（元素）.width（）；
高度=$（elem）.height（）；
返回[[pos.left，pos.left+宽度]，[pos.top，pos.top+高度]]；
}
功能比较位置（p1、p2）{
变量r1，r2；
r1=p1[0]r2[0]| | r1[0]==r2[0]；
}
返回函数（a，b）{
var pos1=获取位置（a），
pos2=getPositions（b）；
返回比较位置（pos1[0]，pos2[0]）&比较位置（pos1[1]，pos2[1]）；
};
})();
$（'.container1'）.mousemove（函数（e）{
var offset=$（'.container1'）.offset（）；
mouseX=Math.min（e.pageX-offset.left，limitX）；
mouseY=Math.min（e.pageY-offset.top，limitY）；
mouseX=mouseX*3；
mouseY=mouseY*3；
如果（mouseX<0）mouseX=0；
如果（mouseY<0）mouseY=0；
});
$（'.container1'）。单击（函数（）{
proxyTriggerEvent（“单击”）；
});
函数proxyTriggerEvent（eventName）{
$（'.container'）.find（'a，input，.buttons span'））
.each（function（）{//并遍历所有函数进行测试
if（重叠（follower，this））{//每个项目的碰撞检测
$（this.trigger（eventName）；//单击特定元素
return false；//中断循环
}
});
}

---

更新：

• 修正了选择器没有锁定按钮的错误。我将标签误读为
  ，但它实际上是
  。选择器现在是

  .buttons span

  ，而不是

  .button1、.button2

• 使用

  .not（“#follower”）

• 将命中检测移动到

  .container

  的点击处理程序-这样，它就不会在每个间隔帧上运行，只有在它真正计数时才运行
• 将事件触发器代理从单击调用中移出，现在可以触发任何事件，并且可以将其作为常规函数调用，例如：

  proxyTriggerEvent（'mouseup'）或<代码>proxyTriggerEvent（'click'）

---

我想您可以使用jquery.trigger。请看这里的示例：如何使用。触发器如果可能，请编写一些示例代码。它提供更多帮助。对不起，这对我不起作用。我集成了您的代码并在此链接中进行了测试。您能检查一下吗。这段代码中有什么地方出错了吗？如果有什么地方可以修改的话。这很好，但有一个小问题，这不是完美的像素，我想添加悬停功能。如果可能，请修改code@sarath不确定这是否是最好的方法，但是这里有一个更新的jsbin：另外：hover伪类不能用javascript触发（我知道）：嗨，我有一个小问题，如何停止直接鼠标点击我想用触发器点击，有什么办法吗？？请告诉我me@sarath将

click（）

中的匿名函数更改为命名函数，然后删除click绑定。然后，当您想要“触发”它时，只需调用新命名的函数。

var overlaps = (function () { // this is the collision detection code
    function getPositions( elem ) {
        var pos, width, height;
        pos = $( elem ).position();
        width = $( elem ).width();
        height = $( elem ).height();
        return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ];
    }

    function comparePositions( p1, p2 ) {
        var r1, r2;
        r1 = p1[0] < p2[0] ? p1 : p2;
        r2 = p1[0] < p2[0] ? p2 : p1;
        return r1[1] > r2[0] || r1[0] === r2[0];
    }

    return function ( a, b ) {
        var pos1 = getPositions( a ),
            pos2 = getPositions( b );
        return comparePositions( pos1[0], pos2[0] ) && comparePositions( pos1[1], pos2[1] );
    };
})();

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

$('.container1').click(function(){
    proxyTriggerEvent('click');
});

function proxyTriggerEvent(eventName) {
    $('.container').find('a,input,.buttons span')
    .each(function() { // and loop through them all for testing
        if ( overlaps(follower,this) ) { // collision detection for each item
            $(this).trigger(eventName); // click the specific element
            return false; // break out of the loop
        }
    });
}