更改光标位置上的文本

时间:2017-08-10 09:25:34

标签: jquery position mousemove onmousemove

我正在尝试根据光标位置更改文本。 它正在发挥作用,但变化的敏感性是快速的。 所以我想知道是否有办法对此进行调整,这种变化并不快。



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>
&#13;
&#13;
&#13;

http://jsfiddle.net/2raaa/23/

2 个答案:

答案 0 :(得分:0)

你必须改变jquery animate的duration属性。

这是一个工作的掠夺者:

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"
  }, 50, function() {
    $(this).text(randomItem);
    $(this).stop().animate({
      "opacity": "1"
    }, 1);
  });

});

http://jsfiddle.net/2raaa/27/

答案 1 :(得分:0)

我相信你可以制定更好的解决方案。在您的情况下,您只关注鼠标移动,因为您想要提高灵敏度,您可以观察鼠标的实际位置:

&#13;
&#13;
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);
    });
  }
});
&#13;
#message { font-size: 54px; }
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="message">Move the mouse.</div>
&#13;
&#13;
&#13;