使圖像跟隨鼠標指針

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