让图片跟随鼠标指针移动

Question

让图片跟随鼠标指针移动

javascriptjquery

29

我需要一个火箭来跟随我的网站上鼠标指针的移动。这意味着它应该旋转以面对运动的方向，如果可能的话，根据需要覆盖的距离加速。这是否可能？也许可以使用jQuery实现？

- supernoob

12

除非是游戏，否则请勿在网站上使用这样的恼人行为。 - ThiefMaster

2

你不需要使用jQuery。你需要获取光标坐标（查看mousemove事件），并相应地定位你的图像。至于加速度和方向，可以通过公式应用于当前光标位置相对于上一个位置来找到。在不支持现代CSS属性的浏览器中，方向可能是一个问题，你可能需要使用不同方向的多个图像，并使用最接近的一个。 - RobG

1

jQuery确实使代码更加优美。 - ThiefMaster

@ThiefMaster是正确的。此外，这个问题类似于：https://dev59.com/E1HTa4cB1Zd3GeqPTJ9N - Coomie

如果你喜欢$符号，也许可以使用。否则，我怀疑它是否会使代码更短，并且它会在浏览器中产生4000行代码（加上不可避免的插件）。 - RobG

1

@ThiefMaster 我认为这可能对在线图像编辑应用程序有用（通过在鼠标旁边显示小图像来指示当前使用的工具），因此它可能不仅对游戏有用。 - Anderson Green

3个回答

12

好的，这里有一个跟随光标移动的简单框

做其他的事情只需要简单地记住上一次光标位置，并应用公式让框移动到不完全在光标位置。如果框有限制的加速度且必须在光标停止后追赶，那么超时会很方便。用图片替换框也很简单，可以使用 CSS（可以替换框的大部分设置代码）。我认为示例中实际思考的代码大约是8行。

选择正确的图像（使用精灵图）来定位火箭。

是的，它非常恼人。 :-)

function getMouseCoords(e) {
  var e = e || window.event;
  document.getElementById('container').innerHTML = e.clientX + ', ' +
    e.clientY + '<br>' + e.screenX + ', ' + e.screenY;
}


var followCursor = (function() {
  var s = document.createElement('div');
  s.style.position = 'absolute';
  s.style.margin = '0';
  s.style.padding = '5px';
  s.style.border = '1px solid red';
  s.textContent = ""

  return {
    init: function() {
      document.body.appendChild(s);
    },

    run: function(e) {
      var e = e || window.event;
      s.style.left = (e.clientX - 5) + 'px';
      s.style.top = (e.clientY - 5) + 'px';
      getMouseCoords(e);
    }
  };
}());

window.onload = function() {
  followCursor.init();
  document.body.onmousemove = followCursor.run;
}

#container {
  width: 1000px;
  height: 1000px;
  border: 1px solid blue;
}

<div id="container"></div>

- RobG

1

这不是旨在成为完成的代码，只是一个简单的示例，展示如何开始。您还需要处理滚动。 - RobG

8

以下是我的代码（尚未优化，但是是完整的工作示例）：

<head>
  <style>
    #divtoshow {position:absolute;display:none;color:white;background-color:black}
    #onme {width:150px;height:80px;background-color:yellow;cursor:pointer}
  </style>
  <script type="text/javascript">
    var divName = 'divtoshow'; // div that is to follow the mouse (must be position:absolute)
    var offX = 15;          // X offset from mouse position
    var offY = 15;          // Y offset from mouse position
    
    function mouseX(evt) {if (!evt) evt = window.event; if (evt.pageX) return evt.pageX; else if (evt.clientX)return evt.clientX + (document.documentElement.scrollLeft ?  document.documentElement.scrollLeft : document.body.scrollLeft); else return 0;}
    function mouseY(evt) {if (!evt) evt = window.event; if (evt.pageY) return evt.pageY; else if (evt.clientY)return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); else return 0;}
    
    function follow(evt) {
        var obj = document.getElementById(divName).style;
        obj.left = (parseInt(mouseX(evt))+offX) + 'px';
        obj.top = (parseInt(mouseY(evt))+offY) + 'px'; 
        }
    document.onmousemove = follow;
  </script>
</head>
<body>
    <div id="divtoshow">test</div>
    <br><br>
    <div id='onme' onMouseover='document.getElementById(divName).style.display="block"' onMouseout='document.getElementById(divName).style.display="none"'>Mouse over this</div>
</body>

- user2843469

不错，但并不完全符合问题所要求的。 - BarryCap

非常感谢，这真的很有帮助。 - Mhmd Admn

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

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

- wizztjh · Accepted Answer

使用 jQuery 注册 .mousemove 事件到 document 上，通过将图片的 .css left 和 top 属性设置为 event.pageX 和 event.pageY 的值来改变图片位置。

以下是示例： http://jsfiddle.net/BfLAh/1/

$(document).mousemove(function(e) {
  $("#follow").css({
    left: e.pageX,
    top: e.pageY
  });
});

#follow {
  position: absolute;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="follow"><img src="https://placekitten.com/96/140" /><br>Kitteh</br>
</div>

更新以慢速跟随。

http://jsfiddle.net/BfLAh/3/

为了定位，需要获取当前的 css left 和 css top 并与 event.pageX 和 event.pageY 进行比较，然后使用以下代码设置图像方向：

-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg);

为了提高速度，您可以将jQuery动画的持续时间设置为一定的数值。