使用jquery和CSS將圖像旋轉到鼠標

我有一個指南針圖像，並且試圖讓針跟隨頁面上的鼠標，確切地說，圖像在以下演示中如何旋轉，但無需移動並單擊。然而，我很難分解那些代碼，所以任何幫助都將是最值得讚賞的。提前致謝。使用jquery和CSS將圖像旋轉到鼠標

http://www.elated.com/res/File/articles/development/javascript/jquery/smooth-rotatable-images-css3-jquery/

的圖像被簡單地包裹在一個div

<div id="content"> 
<img id="compass" src="compass.png"/> 
<img id="needle" src="needle.png"/> 
</div>

來源

2011-06-21 James

你知道三角，還是我們要教你如何確定從三個強制性點的角度？ – zzzzBov

@zzzzBov我相信我的中學數學將帶我通過 – James

試試這個：https://jsfiddle.net/x2d8pmub/

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); 
}

來源

2011-07-10 14:37:43 aperture

輝煌！感謝一直試圖讓這個工作幾個星期 – James

鏈接已損壞！ –

@ZachSaucier相關代碼包含在答案中。鏈接中沒有其他用途 – aperture

你可以使用CSS3的功能，旋轉格

img { 
-webkit-transform: rotate(-45deg); 
-moz-transform: rotate(-45deg); 
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); 
}

，你可以使用的方法「拖動（）「的jQuery UI來移動它:)

來源

2011-06-21 14:07:11 Michele

而不是類型回答一個關於如何做CSS旋轉的長篇答案，我會把你鏈接到this good writeup。

至於計算旋轉角度，您需要知道指南針中心的位置以及鼠標的位置。在文檔上綁定mousemove事件以在鼠標移動時更新指南針。

查找x和y的差：

dx = mouse.x - compass.x; 
dy = mouse.y - compass.y;

假設旋轉變爲順時針方向旋轉，並且0 °是垂直的（這將逆轉Math.atan2參數），tan(Θ) = dx/dy。

Θ = arctan(dx/dy);

或JS

angle = Math.atan2(dx, dy);

讓我知道，如果我搞砸了減法的順序dx & dy。

來源

2011-06-21 14:11:19 zzzzBov

使用jquery和CSS將圖像旋轉到鼠標

回答

相關問題