类似于Windows鼠标轨迹。

javascript - 是否可以在网页上添加光标轨迹,而不是默认轨迹,而是图片或gif?-LMLPHP

可以使用自定义图片或gif代替默认指针
用于最有可能使用javascript的网页。

如果可能的话,我将如何去做呢?

编辑:感谢您尝试的一些答案

http://www.javascriptkit.com/script/script2/simpleimagetrail.shtm

由于某种原因,它使“足迹”离我的鼠标很远(不管点迹如何)

https://i.gyazo.com/a03dd419dd4ca35e66e2b439c52e269d.mp4

最佳答案

这是我的网站的Mouse Trail的解决方案。



var dots = [],
    mouse = {
      x: 0,
      y: 0
    };

var Dot = function() {
  this.x = 0;
  this.y = 0;
  this.node = (function(){
    var n = document.createElement("div");
    n.className = "MouseTrail";
    document.body.appendChild(n);
    return n;
  }());
};

Dot.prototype.draw = function() {
  this.node.style.left = this.x + "px";
  this.node.style.top = this.y + "px";
};

for (var i = 0; i < 12; i++) {
  var d = new Dot();
  dots.push(d);
}


function draw() {

  var x = mouse.x,
      y = mouse.y;

  dots.forEach(function(dot, index, dots) {
    var nextDot = dots[index + 1] || dots[0];

    dot.x = x;
    dot.y = y;
    dot.draw();
    x += (nextDot.x - dot.x) * .6;
    y += (nextDot.y - dot.y) * .6;

  });
}

addEventListener("mousemove", function(event) {
  mouse.x = event.pageX;
  mouse.y = event.pageY;
});

function animate() {
  draw();
  requestAnimationFrame(animate);
}

animate();

.MouseTrail {
    position: absolute;
    height: 7px; width: 7px;
    border-radius: 4px;
    background: teal;
  }

关于javascript - 是否可以在网页上添加光标轨迹,而不是默认轨迹,而是图片或gif?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/48161503/

10-09 15:14