我的脚本改变了一些值，似乎没有理由

所以我一直在研究一个脚本，在鼠标坐标处产生气泡。这是一个非常基本的脚本，用于计算像一个随机的不透明度，任意大小一些事情，等我的脚本改变了一些值，似乎没有理由

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) 
 
    } 
 
})

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; 
 
}

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

现在，出于某种原因，一些气泡都没有放置在正确的坐标。每次它产生一个新的泡泡时，该脚本应该从字面上采取e.offsetX和e.offsetY，但它有时似乎对这些值应用模数。

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

的脚本香草JavaScript和其中的错误似乎发生了一件在这里：

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

一个奇怪的事情还注意到，是排量不只是在一个时间发生了一个泡沫，但在短时间内对所有泡沫。

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

所有的输入赞赏！

来源

2016-09-16 Gust van de Wal

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

来源

2016-09-16 17:56:36

良好的观察... – Rayon

添加'指针事件：无;'泡沫做的伎俩！ –

@Joseph我正准备在CodePen后输入 – Illdapt

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

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

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

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

此外，还可以使用其他方法，如prevent bubbling与useCapture。

来源

2016-09-16 17:59:05 Bamieh

我的脚本改变了一些值，似乎没有理由

回答

相关问题