2016-09-19 57 views
2

我有鼠标光标后的图像。如何在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); 

但不成功

+1

我想这个问题是用GET'位置()'。即使没有移动,位置值也只是通过变换旋转而不断变化。你可以看到控制台日志。 https://jsfiddle.net/q9kn8ady/4/ – cjmling

+0

上面的评论可能并不重要或真正的原因,但无论如何对于图像旋转我发现这似乎是更准确的旋转小提琴。 http://jsfiddle.net/22Feh/556/从这里http://stackoverflow.com/questions/7195825/how-to-rotate-image-in-relation-to-mouse-position – cjmling

+0

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

回答

2

你只需要改变的变换(旋转)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%;"/>

+0

角度计算很好的灵魂,但主要问题是结合运动与旋转 – Ilya

+0

你想如何执行运动。你能解释一下吗? –