Question

基本上我试图在网页的顶角创建一个小图像，即使页面滚动并显示鼠标的位置，也会保持相同的位置。

关键是要有一个向下和向右延伸的大型网页，如果我有一个小图像指示访问者在这个页面上的确切位置（因为浏览器窗口较小），这个大页面的导航会更容易比页面）。我想只是跟踪网页上的浏览器窗口位置，但我找不到任何可以帮助我做的事情，所以我想我可以用鼠标移动来做。问题是我对Java一无所知，所以有谁知道如何跟踪页面上的鼠标位置（而不是浏览器）并在浏览器上角的小图像上同时显示它？ / p>

Answer 1

这样可行，但仅限于支持css3转换的现代浏览器（缩放）：

JsFiddle

它的工作原理是将应该在.actual-page div中的整个页面复制到位于页面左上角的.thumbnail div中。然后我用css转换缩放克隆页面并使用javascript将鼠标移动复制到小方框中，这是脚本：

var TinyNav = function() {
    this.init = function() {
        var clone = $('.actual-page').clone();
        $('.thumbnail').append(clone);
        $('.actual-page').on('mousemove', function(e) {
            var posX = e.offsetX;
            var posY = e.offsetY;
            $('.thumbnail .cursor').css({
                top: posY / 10,
                left: posX / 10
            });
        });
    }

    this.init();
}

var tinyNav = new TinyNav();

另一种方法是使用canvas，但浏览器支持不是最好的.. 希望这有帮助

鼠标跟踪页面 - 并显示它

1 个答案: