如何在JavaScript中旋轉跟隨光標的圖像？

HTML：

<img id="cow" src="https://icons.iconarchive.com/icons/gakuseisean/ivista-2/128/Alarm-Arrow-Right-icon.png" height="30px" width="30px" style="position: absolute; top: 50%; left: 50%;"/>

的Javascript：

var mouseXY = {}; 
$(document).on("mousemove", function(event) { 
    mouseXY.X = event.pageX; 
    mouseXY.Y = event.pageY; 
}); 
var iCow = $("#cow"); 
var cowInterval = setInterval(function() 
{ 
    var cowXY = iCow.position(); 
    var diffX = cowXY.left - mouseXY.X; 
    var diffY = cowXY.top - mouseXY.Y; 
    var newX = cowXY.left - diffX/1000; 
    var newY = cowXY.top - diffY/1000; 
    iCow.css({left: newX, top: newY}); 
}, 10);

JSFiddle example

我如何在光標的方向旋轉圖像？
我試圖與transform: rotate()做到這一點：

var cowInterval = setInterval(function() 
{ 
    var cowXY = iCow.position(); 
    var diffX = cowXY.left - mouseXY.X; 
    var diffY = cowXY.top - mouseXY.Y; 
    var newX = cowXY.left - diffX/1000; 
    var newY = cowXY.top - diffY/1000; 
    var tan = diffX/diffY; 
    var atan = Math.atan(tan); 
    iCow.css({left: newX, top: newY, transform: "rotate(" +((-1)*atan - Math.PI/2)+ "rad)"}); 
}, 10);

但不成功

來源

2016-09-19 Ilya

我想這個問題是用GET'位置（）'。即使沒有移動，位置值也只是通過變換旋轉而不斷變化。你可以看到控制檯日誌。 https://jsfiddle.net/q9kn8ady/4/ – cjmling

上面的評論可能並不重要或真正的原因，但無論如何對於圖像旋轉我發現這似乎是更準確的旋轉小提琴。 http://jsfiddle.net/22Feh/556/從這裏http://stackoverflow.com/questions/7195825/how-to-rotate-image-in-relation-to-mouse-position – cjmling

http：// jsfiddle。淨/ 22Feh/5 /： - 在一些評論中回答http://stackoverflow.com/questions/7195825/how-to-rotate-image-in-relation-to-mouse-position –

你只需要改變的變換（旋轉）CSS屬性改變光標現在的位置的時候，牢記光標實際上改變位置。

添加這兩種如果其他條件做出正確的方向

if(diffY > 0 && diffX > 0) { 

    atan += 180; 
    } 
else if(diffY < 0 && diffX > 0) { 

    atan -= 180; 
    }

圖像旋轉，我想這是你想要的。

var mouseXY = {}; 
 
    $(document).on("mousemove", function(event) { 
 
     mouseXY.X = event.pageX; 
 
     mouseXY.Y = event.pageY; 
 
    }); 
 
    var iCow = $("#cow"); 
 
    var prevXY = {X: null, Y: null}; 
 
    var cowInterval = setInterval(function() 
 
    { 
 
    
 
     
 
     if(prevXY.Y != mouseXY.Y || prevXY.X != mouseXY.X && (prevXY.Y != null || prevXY.X != null)) { 
 
     
 
     var cowXY = iCow.position(); 
 
     var diffX = cowXY.left - mouseXY.X; 
 
     var diffY = cowXY.top - mouseXY.Y; 
 
     var tan = diffY/diffX; 
 
     
 
     var atan = Math.atan(tan)* 180/Math.PI;; 
 
     if(diffY > 0 && diffX > 0) { 
 
     
 
     \t atan += 180; 
 
     } 
 
     else if(diffY < 0 && diffX > 0) { 
 
     
 
     \t atan -= 180; 
 
     } 
 
     
 
     prevXY.X = mouseXY.X; 
 
     prevXY.Y = mouseXY.Y; 
 
     iCow.css({transform: "rotate(" + atan + "deg)"}); 
 
    } 
 
    }, 10);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img id="cow" src="https://icons.iconarchive.com/icons/gakuseisean/ivista-2/128/Alarm-Arrow-Right-icon.png" height="30px" width="30px" style="position: absolute; top: 50%; left: 50%;"/>

來源

2016-09-19 13:19:50

角度計算很好的靈魂，但主要問題是結合運動與旋轉 – Ilya

你想如何執行運動。你能解釋一下嗎？ –

如何在JavaScript中旋轉跟隨光標的圖像？

回答

相關問題