Question

所以我一直在研究一个在鼠标坐标处产生气泡的脚本。这是一个非常基本的脚本，可以计算一些随机不透明度，随机大小等等。

＆＃13;

var transform = (function () { // This piece is to test whether transform should be prefixed or not
  var testEl = document.createElement('div')
  if (testEl.style.transform == null) {
    var vendors = ['Webkit', 'Moz', 'ms']
    for (var vendor in vendors) {
      if (testEl.style[ vendors[vendor] + 'Transform' ] !== undefined) {
        return vendors[vendor] + 'Transform'
      }
    }
  }
  return 'transform'
})()

var bubbles = {}
bubbles.chance = 0.08  // Chance for a bubble to spawn at mousemove
bubbles.delay = 50     // Should minimally be 10, otherwise the circles can't transition from small to big
bubbles.duration = 800
bubbles.minScale = 0.2 // The scale of the bubbles will be anywhere between 0.2 and 1 of the default size defined by the CSS
bubbles.minOpacity = 0.4
bubbles.maxOpacity = 0.7

document.getElementById('bubbles').addEventListener('mousemove', function (e) {
  if (Math.random() < bubbles.chance) {
    var $el = document.createElement('div')
    var size = Math.random() * (1 - bubbles.minScale) + bubbles.minScale
    var transition = Math.round(bubbles.duration * 0.9)

    $el.style.transition = transition + 'ms ease-in-out'
    $el.style.top = e.offsetY + 'px'  // Seems to undergo a modulo for some periods of time
    $el.style.left = e.offsetX + 'px' // This one too
    $el.style[transform] = 'translate(-50%, -50%) scale(0)'
    $el.style.opacity = Math.random() * (bubbles.maxOpacity - bubbles.minOpacity) + bubbles.minOpacity

    window.setTimeout(function () {
      $el.style[transform] = 'translate(-50%, -50%) scale(' + size + ')'
      window.setTimeout(function () {
        $el.style[transform] = 'translate(-50%, -50%) scale(0)'
        window.setTimeout(function () {
          $el.parentNode.removeChild($el)
        }, transition)
      }, transition + bubbles.duration)
    }, bubbles.delay)

    document.getElementById('bubbles').appendChild($el)
  }
})

＆＃13;

html, body{height:100%}body{margin:0;background-color:#17C}

#bubbles{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

#bubbles > div{
  position: absolute;
  width: 12vw;
  height: 12vw;
  border-radius: 50%;
  background-color: #FFF;
}

＆＃13;

<div id="bubbles"></div>

＆＃13;

现在，由于某些原因，一些气泡不会放在正确的坐标上。每次产生新的气泡时，该脚本应该逐字地取e.offsetX和e.offsetY，但有时它似乎会对值应用模数。

我认为应用某种模数的原因是因为当你只在水平线上移动时，所有移位的气泡也会形成一条水平线。垂直也是如此。

脚本是vanilla JavaScript，错误似乎发生在这里：

$el.style.top = e.offsetY + 'px'
$el.style.left = e.offsetX + 'px'

值得注意的一个奇怪的事情是，一次只有一个气泡发生位移，而是在短时间内发生所有气泡。

该错误发生在所有主流浏览器中。

赞赏所有输入！

Answer 1

我明白为什么会这样。如果您碰巧悬停在气泡而不是蓝色背景上，它会使用气泡作为offsetX和Y的参考。如果它是整页应用，您可以使用e.clientX和e.clientY代替。否则，如果事件在#bubbles上被触发，则只需要监听该事件。

Answer 2

它与模数无关！ offsetX和offsetY是根据e.target计算的，有时候是bubbles div，但其他时间是生成的圆圈（因为它嵌套在里面）这就是为什么你得到一个小的偏移量从鼠标位置到圆圈，所以下一个圆圈的值很小。

换句话说，只要将鼠标悬停在生成的圆上，问题就会复制。

您可以使用clientX和clientY来获取绝对值。

这是一个更新的小提琴：https://jsfiddle.net/dwhcoqzc/1/

另外，您可以使用其他方法，例如prevent bubbling和useCapture。

我的脚本用似乎没有理由的

2 个答案: