根據鼠標距離動態旋轉圖像

我有一個圖像，並且想旋轉它。不過，我不認爲css關鍵幀會起作用，因爲它們不能動態更改。我目前正在使用一個名爲jquery rotate的jquery插件http://jqueryrotate.googlecode.com。我想要做的是通過從元素到鼠標的距離來改變旋轉的速度。有沒有任何解決方案不是CPU密集型（希望），因爲jquery rotate已經非常浪費CPU的能力。這裏是我的代碼：根據鼠標距離動態旋轉圖像

var angle = 0; 
    var distance = 200; 
    setInterval(function() { 
     plus = distance/100; 
     angle -= plus; 
     $("#elem").rotate(angle); 
    }, 25);

退房this的jsfiddle其將圖像旋轉2度，每個循環。我想要做的是在鼠標靠近時通過改變「距離」變量來加速旋轉。

來源

2013-03-26 Stewy Slocum

編輯：更新這裏的小提琴：

http://jsfiddle.net/eCV8q/25/

找到mouseX &Ÿ與body.pageX &身體y時，發現使用element.offset圖像的偏移量（）。

$(document).ready(function() { 
    $('body').mousemove(function(e) { 
    // had to put the image in a container div as it was rotating 
    var offset = $('#container').offset(); 
    var distanceX = e.pageX - (offset.left + ($('#elem').width()/2));  
    var distanceY = e.pageY - (offset.top + ($('#elem').height()/2)); 
}

來源

2013-03-27 00:14:19 Mupps

是的，這是偉大的，但我怎麼用它來改變旋轉的速度，出於某種原因，[這]（http://jsfiddle.net/eCV8q/24/）不起作用。 – 2013-03-27 00:51:35

interval函數需要在mousemove函數之外，否則它一直會調用interval函數。我把它移到了外面並更新了小提琴：http://jsfiddle.net/eCV8q/25/ – Mupps 2013-03-27 01:31:37

太棒了，即使在256MB RAM的舊emac和1GHz處理器上，它也能完美運行！ – 2013-03-27 17:03:39

我建議你看看https://github.com/jQueryKeyframes/jQuery.Keyframes，因爲它可以動態生成和應用CSS關鍵幀在飛行中的元素。

我已經用它來達到類似的目的，正如你所描述的那樣，一雙眼睛的瞳孔跟着鼠標在頁面的周圍。真棒:)

來源

2014-03-17 09:41:35

根據鼠標距離動態旋轉圖像

回答

相關問題