使图像跟随鼠标指针
[英]Make an image follow mouse pointer
问题描述
I need a rocket to follow the movements of the mouse pointer on my website.
我需要一个火箭来跟随我网站上鼠标指针的移动。 This means it should rotate to face the direction of motion, and if possible, accelerate depending on the distance it has to cover.这意味着它应该旋转以面向运动方向，如果可能，根据它必须经过的距离加速。 Is this even possible ?这甚至可能吗？ jquery perhaps ? jQuery 也许？
3 个解决方案
解决方案1
34 已采纳 2011-08-22 06:34:47
by using jquery to register .mousemove to document to change the image .css left and top to event.pageX and event.pageY.通过使用 jquery 将 .mousemove 注册到文档以将图像 .css left 和 top 更改为 event.pageX 和 event.pageY。
example as below http://jsfiddle.net/BfLAh/1/示例如下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>
updated to follow slowly慢慢更新
http://jsfiddle.net/BfLAh/3/ http://jsfiddle.net/BfLAh/3/
for the orientation , you need to get the current css left and css top and compare with event.pageX and event.pageY , then set the image orientation with对于方向，您需要获取当前的 css left 和 css top 并与 event.pageX 和 event.pageY 进行比较，然后使用
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
for the speed , you can set the jquery .animation duration to certain amount.对于速度，您可以将 jquery .animation 持续时间设置为一定数量。
解决方案2
12 2011-08-22 06:54:05
Ok, here's a simple box that follows the cursor好的，这是一个跟随光标的简单框
Doing the rest is a simple case of remembering the last cursor position and applying a formula to get the box to move other than exactly where the cursor is.剩下的就是记住最后一个光标位置并应用公式使框移动到光标所在位置以外的简单位置。 A timeout would also be handy if the box has a limited acceleration and must catch up to the cursor after it stops moving.如果框的加速度有限并且必须在停止移动后赶上光标，则超时也会很方便。 Replacing the box with an image is simple CSS (which can replace most of the setup code for the box).用图像替换框是简单的 CSS（它可以替换框的大部分设置代码）。 I think the actual thinking code in the example is about 8 lines.我认为示例中的实际思考代码大约为 8 行。
Select the right image (use a sprite) to orientate the rocket.选择正确的图像（使用精灵）来定位火箭。
Yeah, annoying as hell.是的，烦死了。 :-) :-)
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>
解决方案3
6 2013-10-03 16:01:10
Here's my code (not optimized but a full working example):这是我的代码（未优化但完整的工作示例）：
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.