Question

我正在尝试编写自定义鼠标跟踪代码。为此，我使用鼠标位置出现的临时div，并在一小段时间后淡出。目前div只出现在鼠标位置。我试图让它们出现在鼠标正在的位置，并在鼠标移动时停留在那里并绘制更多的div。另外，我如何为每个div添加淡出效果，因此在放置之后它会慢慢变得透明。

到目前为止，这是我的代码。

＆＃13;

var posX,
  posY,
  paused = null,
  circles = [],
  maxCircles = 30,
  //width & height of div
  circleSize,
  //border radius to make it look like a circle
  rad,
  randCircle;

$(document).ready(function() {
  for (var i = 0; i < maxCircles; i++) {
    circleSize = Math.floor((Math.random() * 10) + 5);
    rad = Math.floor(circleSize / 2);
    circles[i] = document.createElement("Div");
    circles[i].style.opacity = "0.6";
    circles[i].className = "circle";
    circles[i].style.width = circleSize + "px";
    circles[i].style.height = circleSize + "px";
    circles[i].style.borderRadius = rad + "px";
    circles[i].style.background = "green";
    circles[i].style.zIndex = "-1";
  }
  $("body").mousemove(function(e) {
    posX = e.clientX - 5;
    posY = e.clientY - 5;
    randCircle = Math.floor((Math.random() * (maxCircles - 1)) + 0);
    if (!paused) {
      document.getElementsByTagName("body")[0].appendChild(circles[randCircle]);

      $('.circle').css({
        position: "absolute",
        top: posY,
        left: posX
      });

      paused = setTimeout(function() {
        paused = null
      }, 100);
    }
  });
});

＆＃13;

body, html {
  height: 100%;
  background: #eee;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 1

你的div会改变位置，因为你是用类名“circle”设置每个div的位置。

您需要更改

$('.circle').css({position:"absolute", top:posY,left:posX});

要

circles[randCircle].css({position:"absolute", top:posY,left:posX});

要让它们淡出，你可以使用CSS为圆圈添加动画。

在鼠标移动时在鼠标位置创建一个圆

1 个答案: