我正在尝试根据光标位置更改文本。 它正在工作,但变化敏感性太快了。 所以我想知道是否有办法调整这个,变化不是那么快。
var text = ['Orange', 'Banana', 'Strawberry', 'Melon']
$(document).mousemove(function(event) {
var randomItem = text[Math.floor(Math.random() * text.length)];
var div = $("#message");
div.stop().animate({
"opacity": "1"
}, 1, function() {
$(this).text(randomItem);
$(this).stop().animate({
"opacity": "1"
}, 1);
});
});
#message { font-size: 54px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="message">Move the mouse.</div>
最佳答案
我相信您可以制定更好的解决方案。在你的情况下,你只关注鼠标移动,因为你想增加灵敏度,你可以观察鼠标的实际位置:
var text = ['Orange', 'Banana', 'Strawberry', 'Melon']
var pos = {x: 0, y:0};
$(document).mousemove(function(event) {
var randomItem = text[Math.floor(Math.random() * text.length)];
var div = $("#message");
if (event.pageX > pos.x+30 || event.pageY > pos.y+30 || event.pageY < pos.y -30 || event.pageX < pos.x-30) {
pos.x = event.pageX;
pos.y = event.pageY;
div.stop().animate({
"opacity": "1"
}, 1, function() {
$(this).text(randomItem);
$(this).stop().animate({
"opacity": "1"
}, 1);
});
}
});
#message { font-size: 54px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="message">Move the mouse.</div>
关于jquery - 更改光标位置上的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45609590/