鼠標跟蹤的頁面 - 並顯示它

Question

基本上我試圖在網頁的頂部角落創建一個小圖像，即使頁面滾動並將顯示鼠標的位置，這將停留在相同的位置。

關鍵是要有一個可以向下和向右延伸的大型網頁，如果我有一個小圖片來表明訪問者在這個頁面上的位置（因爲瀏覽器窗口是小於頁面）。我只想跟蹤網頁上的瀏覽器窗口位置，但找不到能夠幫助我做到的任何事情，所以我想我可能只是通過鼠標移動來實現。問題是我對java一無所知，所以有人知道我可以如何跟蹤鼠標在頁面上的位置（而不是瀏覽器），並同時顯示在瀏覽器上角的小圖像上？

Answer 1

這會工作，但只在支持CSS3變換（規模）現代瀏覽器：

JsFiddle

它可以通過複製整個頁面，應該是在.actual頁DIV成。位於頁面左上方的縮略圖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(); 

這樣做會使用帆布的另一種方式，但瀏覽器的支持是不是最好的與此.. 希望這可以幫助