jQuery用动画图像替换鼠标光标 [英] jquery replace mouse cursor with animated image

问题描述

我用以下代码将光标替换为距离较近的2张图像:

I'm replace the cursor to 2 images with small distance by this code:

$(document).mousemove(function (e) {
        $("#firstImage").css({
            left: e.pageX,
            top: e.pageY
        });
        $("#secondImage").css({
            left: e.pageY + 50,
            top: e.pageY
        });
});

现在我要添加动画-

以便图像可以左右移动(第一幅图像右移，第二幅图像-左移，此后第一幅左移和第二幅右移)，并且需要一直移动.

so that the images move right and left together (the first image right and the second - left, and after that the first left and the second right), and it need to be all the time.

setInterval(function () {
        $("#first").animate({
            left: "-=100px"
        }, 2000);
        $("#second").animate({
            left: "+=100px"
        }, 2000);
        $("#first").animate({
            left: "+=100px"
        }, 2000);
        $("#second").animate({
            left: "-=100px"
        }, 2000);
    }, 4000);

问题-

如果我给它左" css属性-它不再跟随鼠标移动，而是一直返回到设置动画时的位置.

if I give to it "left" css properties - it's no longer follows the mouse movement, but returns all time to where it was when I set the animation.

推荐答案

解决方案

HTML

SOLUTION

HTML

<div id="mousemove">
  <img id="first" src="http://xxx.png">
  <img id="second" src="http://xxx.png">
</div>

CSS

#mousemove {
  position: absolute
}
#first, #second {
  position: relative
}

JS

$(document).mousemove(function (e){
  $("#mousemove").css({
    left: e.pageX,
    top: e.pageY
  });
});

setInterval(function () {
  $("#first").animate({
    left: "-=100px"
  }, 2000);
  $("#second").animate({
    left: "+=100px"
  }, 2000);
}, 2000);

这篇关于jQuery用动画图像替换鼠标光标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！