如何在JavaScript中实现跟随光标旋转图像？

Question

如何在JavaScript中实现跟随光标旋转图像？

5

我有一个跟随鼠标光标的图像。

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示例

如何将图像旋转到光标的方向？
我已经尝试使用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);

但是没有成功

- Ilya

1

我猜问题出在 position() 上。即使没有移动，位置值也会因为旋转变换而不断改变。你可以看到控制台日志。https://jsfiddle.net/q9kn8ady/4/ - cjmling

上述评论可能并不重要或是真正的原因，但无论如何，对于图像旋转，我找到了这个 JSFiddle，它似乎更准确地旋转。链接为 http://jsfiddle.net/22Feh/556/，来源为 https://dev59.com/f1rUa4cB1Zd3GeqPl6QX。 - cjmling

请参考以下链接中的某些评论：https://dev59.com/f1rUa4cB1Zd3GeqPl6QXhttp://jsfiddle.net/22Feh/5/ - Dipendra Singh

@DipendraSingh 当你尝试移动它时，它会出现错误。 - cjmling

@cjmling请使用您自己的图片替换此图片。 - Dipendra Singh

你可以使用向量类简化位移逻辑：https://jsfiddle.net/0x1dwqmk/ 这是一个开始... - Mr. Polywhirl

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shubham Khatri · Accepted Answer

当更改光标位置时，您只需要更改transform（rotate）CSS属性，同时记住光标实际上已经改变了位置。

添加这两个if-else条件以使图像以正确的方向旋转

 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) {
      
       atan += 180; 
      }
      else if(diffY < 0 && diffX > 0) {
      
       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%;"/>