javascript - 鼠标跟踪页面 - 并显示它

Question

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

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

Answer 1

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

提琴手

它的工作原理是将 .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();

另一种方法是使用画布，但浏览器支持也不是最好的。希望这会有所帮助