如何根據鼠標位置旋轉圖像？

我試圖做這個效果：http://metatroid.com/articles在頁面的頂部，但我不能讓它旋轉只是他們給的代碼。如何根據鼠標位置旋轉圖像？

var img = $('.image'); 
if(img.length > 0){ 
    var offset = img.offset(); 
    function mouse(evt){ 
     var center_x = (offset.left) + (img.width()/2); 
     var center_y = (offset.top) + (img.height()/2); 
     var mouse_x = evt.pageX; var mouse_y = evt.pageY; 
     var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y); 
     var degree = (radians * (180/Math.PI) * -1) + 90; 
     img.css('-moz-transform', 'rotate('+degree+'deg)'); 
     img.css('-webkit-transform', 'rotate('+degree+'deg)'); 
     img.css('-o-transform', 'rotate('+degree+'deg)'); 
     img.css('-ms-transform', 'rotate('+degree+'deg)'); 
     } 
$(document).mousemove(mouse); 
}

所以我把這個代碼在我的javascript函數，改變了我的形象類，以「形象」，但它仍然不會轉動。

是否有任何其他jQuery或css標記與此相關或您可以給我的任何提示使這項工作？我對這個還是一個新鮮的東西，所以任何幫助真的很感激。謝謝。

UPDATE：我設法讓旋轉效果工作，但它不會在右邊的軸上旋轉。這裏是我正在工作的網址：http://www.lifetime-watches.com/test/i_watches.html

我該如何移動軸/樞軸，使它能夠完美地工作？

來源

2011-08-25 monogatari

您是否收到任何錯誤？ –

如果託管該文件，您可以向我們提供指向該文件的鏈接嗎？ – HyderA

我沒有得到任何錯誤，我把鏈接放在http://jsfiddle.net/KmgNJ/1/。謝謝。 – monogatari

問題在於你只定義了函數鼠標，並且只設置了事件處理程序，如果img.length> 0.該腳本位於頭部，並且在主體可以加載之前執行，所以沒有圖像。

修復 - 將腳本移動到定義圖像的位置之後的文檔正文中。另外，你的小提琴不包括jQuery（而是mootools）。一旦你解決了這兩件事，它就會起作用。

來源

2011-08-25 20:00:10 James

謝謝！這解決了問題！我仍然有很多要了解jQuery。非常感謝。 – monogatari

更新：我設法讓旋轉效果工作，但它不會在右邊的軸上旋轉。這裏是我正在工作的網址：http://www.lifetime-watches.com/test/i_watches.html 如何移動軸/軸，使其完美工作？ – monogatari

這是因爲圖像的中心不再是旋轉點。你正在尋找很多數學來修正這個問題 - 修改圖像，使其中心成爲旋轉點。如果你想要一個完美的手錶，你必須建立一個完美的bighand.png。圖像高度和寬度應該是奇數，中間像素在這兩種情況下都是手錶中孔的確切中心。如果圓的直徑爲偶數個像素，則會產生擺動效果。不要在手錶上做任何照明效果，因爲它在顛倒時看起來很奇怪。 – James

如何根據鼠標位置旋轉圖像？

回答

相關問題