我需要一个火箭来跟随我的网站上鼠标指针的移动。这意味着它应该旋转以面对运动的方向,如果可能的话,根据需要覆盖的距离加速。 这是否可能?也许可以使用jQuery实现?
我需要一个火箭来跟随我的网站上鼠标指针的移动。这意味着它应该旋转以面对运动的方向,如果可能的话,根据需要覆盖的距离加速。 这是否可能?也许可以使用jQuery实现?
使用 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>
更新以慢速跟随。
为了定位,需要获取当前的 css left 和 css top 并与 event.pageX 和 event.pageY 进行比较,然后使用以下代码设置图像方向:
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
为了提高速度,您可以将jQuery动画的持续时间设置为一定的数值。
好的,这里有一个跟随光标移动的简单框
做其他的事情只需要简单地记住上一次光标位置,并应用公式让框移动到不完全在光标位置。如果框有限制的加速度且必须在光标停止后追赶,那么超时会很方便。用图片替换框也很简单,可以使用 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>
以下是我的代码(尚未优化,但是是完整的工作示例):
<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>