我的脚本更改了一些值,这似乎没有理由
My script changes some values with what seems to be no reason
所以我一直在研究一个在鼠标坐标处生成气泡的脚本。这是一个非常基本的脚本,可以计算一些东西,例如随机不透明度、随机大小等。
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'
还有一件奇怪的事情需要注意,那就是位移不仅一次发生在一个气泡上,而是发生在短时间内的所有气泡上。
该错误发生在所有主要浏览器中。
感谢所有输入!
我明白为什么会发生这种情况。 如果您碰巧将鼠标悬停在气泡而不是蓝色背景上,它将使用气泡作为 offsetX 和 Y 的参考。 如果是整页应用,则可以改用e.clientX
和e.clientY
。 否则,如果事件在#bubbles
上触发,则只需侦听该事件。
它与模无关! offsetX
和offsetY
是根据e.target
计算的,有时是bubbles
div,但有时是生成的圆(因为它嵌套在里面(,这就是为什么你从鼠标位置到圆的偏移量很小,所以下一个圆圈得到的值很少。
换句话说,只要您将鼠标悬停在生成的圆圈上,问题就会重复出现。
可以使用clientX
和clientY
来获取绝对值。
这是一个更新的小提琴:https://jsfiddle.net/dwhcoqzc/1/
此外,您还可以使用其他方法,例如 prevent bubbling
与 useCapture
.
相关文章:
- HTML文档中脚本标记的位置-<头部>&<身体>有不同的行为
- 当我有一个脚本数组时,如何等待脚本加载
- iFrame 不会扩展到完整的内容高度,即使有 jQuery 脚本以它为目标
- 我有一个脚本添加多个标记到交互式谷歌地图.我希望所有的标记都能容纳不同的信息窗口
- 是否有理由将参数转换为局部变量
- 如何在可能已经有引导脚本的环境中加载引导脚本
- 是否有理由在grails中使用JavaScript库插件,通过TagLibs公开给定的库,而不是直接使用它?
- NodeJS承诺vs回调:有理由不支持两者吗?
- 是否有任何脚本处理程序显示弹出屏幕(jsp/html)页面锁定或屏幕保护模式
- 我有一个脚本,在mozilla上工作得很好,但在ie8上根本不起作用
- 如果我在我的文档中有许多脚本与src到相同的js文件,会发生什么
- 脚本检查是否有其他脚本
- 是否有理由在Javascript中使用单引号而不是双引号
- 你可能有一个脚本在HTML文本区/文本字段,并有它执行
- 是否有任何理由使用动态创建的脚本来执行解决方案?标记而不是eval()
- 如何有背景脚本和类似于默认弹出的东西
- 是否有理由使用array.forEach()而不是for..在ES6中,两者都可以使用
- 是否有理由不使用document.getElementById的简写?
- dojo contentPane,我张贴html代码与href在我的contentPane.html代码有一个脚本,但不
- 是否有理由在函数中创建一个局部$(this)变量?