Question

对你来说有点奇怪...我有一个我正在努力的网站，我需要操作一个巨大的毛茸茸的手臂作为光标。该站点有多条路线，巨型手形光标仅存在于其中一条路线上。我有一个操纵手的绝对定位的指令。该站点的其余部分都是Angular，所以我觉得有点内疚当前在指令中的jquery路由如下所示。

<div id="big-cursor" big-hand><img src="images/hand2.png" /></div>

和

angular.module('variousAssetsApp').directive('bigHand', function () {

    var link = function($scope, element){

        $("html,body").mousemove(function(e) {
           var tarX = e.pageX;
           var tarY = e.pageY;
           element.css({
               top: tarY + 20,
               left : tarX + 20
           },0);
        });
    }


    return {
        restrict: 'A',
        link: link
    };
});

问题是当我从不同的路线进入时，我需要这个手形光标位于正确的位置。现在，只有在鼠标移动到路径后才会移动到正确的位置（因为指令link功能仅在那里执行），所以手/臂从一个位置立即跳转到另一个。

有没有更好的解决方案呢？我唯一能想到的就是创建一个保持当前位置的工厂，但这似乎会被称为过多和过快。我不能将光标放在当前路线之外，因为我还有一些非常沉重的z-index内容。

有什么想法吗？

Answer 1

我看到你的问题：当实例化指令时，没有触发mousemove事件（光标还没有移动），所以在光标移动之前它不能定位bigHand。

因此，您必须跟踪整个站点中的鼠标位置。

我会在你的文档正文中添加一个简单的指令来跟踪坐标。它可以与服务配对以保存x和y值。然后bigHand指令可以从服务中观察这些值并相应地重新定位手部图像。

如何跟踪Angular中的全局鼠标位置？

1 个答案: