如何在JavaScript中旋转跟随光标的图像?
问题描述:
我有鼠标光标后的图像。如何在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);
我如何在光标的方向旋转图像?
我试图与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);
但不成功
答
你只需要改变的变换(旋转)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
你想如何执行运动。你能解释一下吗? –
我想这个问题是用GET'位置()'。即使没有移动,位置值也只是通过变换旋转而不断变化。你可以看到控制台日志。 https://jsfiddle.net/q9kn8ady/4/ – cjmling
上面的评论可能并不重要或真正的原因,但无论如何对于图像旋转我发现这似乎是更准确的旋转小提琴。 http://jsfiddle.net/22Feh/556/从这里http://*.com/questions/7195825/how-to-rotate-image-in-relation-to-mouse-position – cjmling
http:// jsfiddle。净/ 22Feh/5 /: - 在一些评论中回答http://*.com/questions/7195825/how-to-rotate-image-in-relation-to-mouse-position –