使图像跟随鼠标指针

Question

我需要一个火箭来跟随我网站上鼠标指针的移动。 这意味着它应该旋转以面向运动方向，如果可能，根据它必须经过的距离加速。 这甚至可能吗？ jQuery 也许？

Answer 1

通过使用 jquery 将 .mousemove 注册到文档以将图像 .css left 和 top 更改为 event.pageX 和 event.pageY。

 $(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 .animation 持续时间设置为一定数量。

Answer 2

好的，这是一个跟随光标的简单框

剩下的就是记住最后一个光标位置并应用公式使框移动到光标所在位置以外的简单位置。 如果框的加速度有限并且必须在停止移动后赶上光标，则超时也会很方便。 用图像替换框是简单的 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>

Answer 3

这是我的代码（未优化但完整的工作示例）：

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

使图像跟随鼠标指针

问题描述

3 个解决方案

解决方案1
34 已采纳 2011-08-22 06:34:47

解决方案2
12 2011-08-22 06:54:05

解决方案3
6 2013-10-03 16:01:10

使图像跟随鼠标指针

问题描述

3 个解决方案

解决方案1 34 已采纳 2011-08-22 06:34:47

解决方案2 12 2011-08-22 06:54:05

解决方案3 6 2013-10-03 16:01:10

解决方案1
34 已采纳 2011-08-22 06:34:47

解决方案2
12 2011-08-22 06:54:05

解决方案3
6 2013-10-03 16:01:10