jjzjj

javascript - 我的脚本似乎毫无理由地更改了一些值

coder 2025-03-05 原文

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

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 上触发的事件。

关于javascript - 我的脚本似乎毫无理由地更改了一些值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39537415/

javascript毫无bubblescode39

有关javascript - 我的脚本似乎毫无理由地更改了一些值的更多相关文章

  1. ruby-on-rails - Ruby on Rails 迁移，将表更改为 MyISAM - 2

    如何正确创建Rails迁移，以便将表更改为MySQL中的MyISAM？目前是InnoDB。运行原始执行语句会更改表，但它不会更新db/schema.rb，因此当在测试环境中重新创建表时，它会返回到InnoDB并且我的全文搜索失败。我如何着手更改/添加迁移，以便将现有表修改为MyISAM并更新schema.rb，以便我的数据库和相应的测试数据库得到相应更新？ 最佳答案 我没有找到执行此操作的好方法。您可以像有人建议的那样更改您的schema.rb，然后运行:rakedb:schema:load，但是，这将覆盖您的数据。我的做法是(假设

  2. ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2

    我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚

  3. ruby-on-rails - 独立 ruby​​ 脚本的配置文件 - 2

    我有一个在Linux服务器上运行的ruby​​脚本。它不使用rails或任何东西。它基本上是一个命令行ruby​​脚本，可以像这样传递参数:./ruby_script.rbarg1arg2如何将参数抽象到配置文件(例如yaml文件或其他文件)中？您能否举例说明如何做到这一点？提前谢谢你。 最佳答案 首先，您可以运行一个写入YAML配置文件的独立脚本:require"yaml"File.write("path_to_yaml_file",[arg1,arg2].to_yaml)然后，在您的应用中阅读它:require"yaml"arg

  4. ruby-on-rails - 项目升级后 Pow 不会更改 ruby​​ 版本 - 2

    我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby​​版本(从1.9.3到2.0.0，我使用RVM)当我切换ruby​​版本、安装所有gem依赖项时，我通过运行railss并访问localhost:3000确保该应用程序正常运行以前，我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后，由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0，此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘

  5. ruby - Capistrano 3 在任务中更改 ssh_options - 2

    我尝试使用不同的ssh_options在同一阶段运行capistranov.3任务。我的production.rb说:set:stage,:productionset:user,'deploy'set:ssh_options,{user:'deploy'}通过此配置，capistrano与用户deploy连接，这对于其余的任务是正确的。但是我需要将它连接到服务器中配置良好的an_other_user以完成一项特定任务。然后我的食谱说:...taskswithoriginaluser...task:my_task_with_an_other_userdoset:user,'an_othe

  6. ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby​​ 变量的内容？ - 2

    我是一个Rails初学者，但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby​​中打印出变量(认为它会在终端中出现)，但没有得到任何结果。有什么建议吗？我知道Rails调试器，但更喜欢使用inspect来打印我的变量。 最佳答案 您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R

  7. ruby - 我可以将我的 README.textile 以正确的格式放入我的 RDoc 中吗？ - 2

    我喜欢使用Textile或Markdown为我的项目编写自述文件，但是当我生成RDoc时，自述文件被解释为RDoc并且看起来非常糟糕。有没有办法让RDoc通过RedCloth或BlueCloth而不是它自己的格式化程序运行文件？它可以配置为自动检测文件后缀的格式吗？(例如README.textile通过RedCloth运行，但README.mdown通过BlueCloth运行) 最佳答案 使用YARD直接代替RDoc将允许您包含Textile或Markdown文件，只要它们的文件后缀是合理的。我经常使用类似于以下Rake任务的东西:

  8. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  9. ruby - 更改 ActiveRecord 中对象的类 - 2

    假设我有一个FireNinja我的数据库中的对象，使用单表继承存储。后来才知道他真的是WaterNinja.将他更改为不同的子类的最干净的方法是什么？更好的是，我很想创建一个新的WaterNinja对象并替换旧的FireNinja在数据库中，保留ID。编辑我知道如何创建新的WaterNinja来self现有FireNinja的对象，我也知道我可以删除旧的并保存新的。我想做的是改变现有项目的类别。我是通过创建一个新对象并执行一些ActiveRecord魔法来替换行，还是通过对对象本身做一些疯狂的事情，或者甚至通过删除它并使用相同的ID重新插入来做到这一点，这是问题的一部分。

  10. ruby-on-rails - 如何生成传递一些自定义参数的 `link_to` URL？ - 2

    我正在使用RubyonRails3.0.9，我想生成一个传递一些自定义参数的link_toURL。也就是说，有一个articles_path(www.my_web_site_name.com/articles)我想生成如下内容:link_to'Samplelinktitle',...#HereIshouldimplementthecode#=>'http://www.my_web_site_name.com/articles?param1=value1¶m2=value2&...我如何编写link_to语句“alàRubyonRailsWay”以实现该目的？如果我想通过传递一些

随机推荐