我的腳本改變了一些值，似乎沒有理由

所以我一直在研究一個腳本，在鼠標座標處產生氣泡。這是一個非常基本的腳本，用於計算像一個隨機的不透明度，任意大小一些事情，等我的腳本改變了一些值，似乎沒有理由

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

我的腳本改變了一些值，似乎沒有理由

回答

相關問題