Javascript 使图像跟随鼠标指针
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7143806/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make an image follow mouse pointer
提问by supernoob
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 也许？
回答by wizztjh
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/
updated to follow slowly
慢慢更新
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 持续时间设置为一定数量。
回答by RobG
Ok, here's a simple box that follows the cursor:
好的，这是一个跟随光标的简单框：
<script type="text/javascript">
function getMouseCoords(e) {
var e = e || window.event;
document.getElementById('msg').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';
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;
}
</script>
<div id="msg" style="width: 1000px; height: 1000px; border: 1px solid blue;"></div>
Doing the rest is a simple case of remembering the last cursor position and applying a forumula 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). I think the actual thinking code in the example is about 8 lines.
剩下的就是记住最后一个光标位置并应用公式使框移动到光标所在位置以外的简单位置。如果框的加速度有限并且必须在停止移动后赶上光标，则超时也会很方便。用图像替换框是简单的 CSS（它可以替换框的大部分设置代码）。我认为示例中的实际思考代码大约为 8 行。
Select the right image (use a sprite) to orientate the rocket.
选择正确的图像（使用精灵）来定位火箭。
Yeah, annoying as hell. :-)
是的，烦死了。:-)
回答by user2843469
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>
