Javascript - 使圖像出現在光標處

Question

任何想法如何實現類似於此的效果？

http://garyc.me/fun/gusta.swf

Answer 1

是，使用mousemove事件

http://jsfiddle.net/GTTGD/1/

var img = new Image; 
img.src = 'http://files.myopera.com/lengoc89/albums/317185/3133~Kitty-Posters.jpg'; 

document.addEventListener('mousemove', function(e) { 
    e = e || window.event; 
    var tag = document.createElement('img'); 
    console.log(e); 
    tag.src = img.src; 
    tag.style.position = 'absolute'; 
    tag.style.height = '50px'; 
    tag.style.width = '50px'; 
    tag.style.top = (e.pageY || e.clientY) + 'px'; 
    tag.style.left = (e.pageX || e.clientX) + 'px'; 
    this.body.appendChild(tag); 
}, false);​ 

Answer 2

事後看來，這是一個非常愚蠢的答案。所以我會再次回答一個實際的例子，說明如何在HTML5中製作Flash文件中的內容。

如果你能夠完全理解這是如何工作的，那麼在閃光燈中做同樣的事情應該是沒有汗水的。但也要考慮到我無意中製作的演示比flash演示運行速度更快，更穩定，因此您可能會考慮將HTML5用於您的下一個項目。

我提出的例子是here，並且不用再費周折，我將通過線把它分解線，開始與HTML：

<canvas id="canvas" width="400" height="300"> 
    Your browser does not support the HTML5 canvas. <br> 
    Get or upgrade to a modern browser like Google Chrome or Mozilla Firefox. 
</canvas> 

此創建DOM中的<canvas>元件。畫布是包含在HTML5規範中的2D（即將推出的3D！）圖形API，可用於繪製圖形和製作動畫。您使用JavaScript通過其drawing context來控制畫布，因此深入瞭解ECMAscript（其中包括JavaScript和Flash的ActionScript，它基於JavaScript）將極大地幫助您。

現在的JavaScript：

ctx = canvas.getContext('2d'); 

這得到繪圖方面，它提供了讓你在畫布上繪製的方法。目前唯一的參數是'2d'，但是有一個參數'experimental-webgl'允許使用名爲web gl的實驗性3D技術，但需要一個好的視頻卡。我相信這僅適用於Webkit瀏覽器，例如Google Chrome和Gecko瀏覽器，如Firefox。

注意：在我測試過的每個瀏覽器中，您不必使用document.getElementById()方法通過其ID標識項目。只要id存在於HTML中，包含該名稱並以該屬性的每個元素的id命名的變量列表將被製作爲on load。當然，這意味着您必須將<script>標記放在HTML之下，而不是在它之上，因此可以事先加載DOM和節點列表。

mouse = [0,0]; 
imgLoaded = false; 
trail = []; 

這些變量用於跟蹤鼠標位置，圖像是否已加載，跟蹤和圖像的大小。 mouse是一個數組，它包含鼠標的X和Y座標，並且每次鼠標移動時都會更新，imgLoaded在稍後的函數中設置爲true，以指示圖像已被加載，因此它正確繪製，trail是一個數組，自演示開始以來保存每個鼠標位置，它保存具有用於繪製軌跡的座標的陣列，並且與mouse一起更新。

img = new Image(); 
img.onload = function(){ 
    imgLoaded = true; 
}; 
img.src = 'http://images.encyclopediadramatica.se/0/0a/Me_gusta_original.png'; 

這個代碼塊創建一個圖像，將其源到可靠的服務器保持我古斯塔圖片，而不是繪製圖像on load，它更新imgLoaded布爾以指示該圖像現在可以得出。

canvas.onmousemove=function(e){ 
    var X,Y; 
    if(e.clientX){ 
     X = e.clientX; 
     Y = e.clientY; 
    }else{ 
     X = e.pageX; 
     Y = e.pageY; 
    } 
    mouse = [X,Y]; 
    trail.push(mouse); 
}; 

此事件功能（即在事件運行的特殊類型的函數）被綁定到畫布上，並且當它運行時，它抓住從已經傳遞到參數的e變量鼠標的位置。完成後，它將座標添加到trail陣列。

UPDATE = function(){ 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
    if(imgLoaded){ 
     for(var i = trail.length-50;i<trail.length;i++){ 
      if(trail[i]){ 
       ctx.drawImage(img,trail[i][0],trail[i][1],100,100); 
      } 
     } 
    } 
    setTimeout(UPDATE,1000/60); 
}; 
UPDATE(); 

這是處理其餘部分的地方。該函數被定義，然後在函數完成後立即運行，並在延遲1000/60毫秒或60 fps時再次運行。現在我們實際上看到了一些畫布動作！

ctx.clearRect(0,0,width,height)清除一切的整個畫布即如果圖像是通過請求imgLoaded變裝上它

現在檢查得出。如果爲true，則繼續循環遍歷對象併爲每個座標繪製圖像。然而，這裏發生了一些非常聰明的事情。我不是從0開始i，而是從trail.length-50開始，並在trail.length處結束，因爲實際上，我們只想顯示數組的一部分，而不是整個部分。

由於數組開始爲空，它會檢查布爾表達式trail[i]是否返回true。如果是這樣，那麼它會繼續繪製這部分路徑。如果沒有，那麼它繞過它，避免錯誤。在循環之後，它通過再次運行自己完成。

至於如何隱藏光標並獲得虛線邊框，即CSS或層疊樣式表。這種語言允許精確控制頁面的樣式，以及給這個網站帶來什麼樣的色彩。

我希望這有助於比以前的答案，我給了，這是這條線之下更多：

---

Before reading: I apologize if it seems like I misinterpreted the question. The question is about how to detect mouse events and this works as a great beginner example to demonstrate mouse events.

在JavaScript中，有幾種方法去製作的圖像，當你將鼠標懸停在出現它，是漂亮，簡單的例子是：

HTML：

 

    <div id="img"> 
    i am a placeholder 
    </div> 

的Javascript：

 

    var img = document.getElementById('img') 
    var Main = { 
    IN: function() { 
     img.innerHTML = '<img src="img.jpg"></img>' 
    }, 
    OUT: function() { 
     img.innerHTML = 'I am a placeholder' 
    } 

    } 
    //I used an object to hold the functions and keep them uniform 

    img.onmouseover = Main.IN 
    img.onmouseout = Main.OUT​ 
    //these events call the function