javascript - 使单词跳动并随机改变位置

coder 2023-08-02 原文

我正在做这个插件，它接受文字并让它们在屏幕上跳动:

它们先出现并长大，然后消失，换地方再出现

工作插件:

+ function($) {

  var Pulsate = function(element) {
    var self = this;
    
    self.element = element;
    self.max = 70;
    self.min = 0;
    self.speed = 500;
    self.first = true;
    self.currentPlace;
    self.possiblePlaces = [
      {
        id: 0,
        top: 150,
        left: 150,
      },
      {
        id: 1,
        top: 250,
        left: 250,
      },
      {
        id: 2,
        top: 350,
        left: 350,
      },
      {
        id: 3,
        top: 250,
        left: 750,
      },
      {
        id: 4,
        top: 450,
        left: 950,
      }
    ];
    
  };
  
  Pulsate.prototype.defineRandomPlace = function() {
    var self = this;
    self.currentPlace = self.possiblePlaces[Math.floor(Math.random() * self.possiblePlaces.length)];
    
    if(!self.possiblePlaces) self.defineRandomPlace;
    
    
    
    self.element.css('top', self.currentPlace.top + 'px');
    self.element.css('left', self.currentPlace.left + 'px');
  };
  
  Pulsate.prototype.animateToZero = function() {
    var self = this;
    
    self.element.animate({
      'fontSize': 0,
      'queue': true
    }, self.speed, function() {
      self.defineRandomPlace();
    });
    
  };
  
  Pulsate.prototype.animateToRandomNumber = function() {
    var self = this;
    
    self.element.animate({
      'fontSize': Math.floor(Math.random() * (70 - 50 + 1) + 50),
      'queue': true
    }, self.speed, function() {
      self.first = false;
      self.start();
    });
  };
  
  Pulsate.prototype.start = function() {
    var self = this;
    
    if (self.first) self.defineRandomPlace();
    if (!self.first) self.animateToZero();
    
    self.animateToRandomNumber();
  };


  $(window).on('load', function() {
    $('[data-pulsate]').each(function() {
      var element = $(this).data('pulsate') || false;
      
      if (element) {
        element = new Pulsate($(this));
        element.start();
      }

    });

  });

}(jQuery);

body {
  background: black;
  color: white;
}

.word {
  position: absolute;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.9);
  font-size: 0px;
}


.two {
  position: absolute;
  color: white;
  left: 50px;
  top: 50px;
}
div {
  margin-left: 0px;
}

<span class="word" data-pulsate="true">Love</span>
<span class="word" data-pulsate="true">Enjoy</span>
<span class="word" data-pulsate="true">Huggs</span>





<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

如果您注意到我在 self.possiblePlaces 中定义了单词可以增长的位置，并且如果您注意到动画，有时一个地方可以增长一个单词，那么我来这里的目的是寻求帮助。我怎样才能让两个词永远不会出现在同一个地方？？

我想这样做:

在 defineRandomPlace 中，我在 possiblePlaces 数组中选择了一个随机对象:

  Pulsate.prototype.defineRandomPlace = function() {
    var self = this;
    self.currentPlace = self.possiblePlaces[Math.floor(Math.random() * self.possiblePlaces.length)];

    if(!self.possiblePlaces) self.defineRandomPlace;


    delete self.possiblePlaces[self.currentPlace.id];
    self.element.css('top', self.currentPlace.top + 'px');
    self.element.css('left', self.currentPlace.left + 'px');
  };

注意删除，首先我克隆选择的对象，在我删除它之后但保留他在数组中的位置。

动画结束后，我再次将对象放入数组中，然后重新开始:

  Pulsate.prototype.animateToZero = function() {
    var self = this;

    self.element.animate({
      'fontSize': 0,
      'queue': true
    }, self.speed, function() {
      self.possiblePlaces[self.currentPlace.id] = self.currentPlace;
      self.defineRandomPlace();
    });

但这并没有什么不同。

谢谢!!

笔:http://codepen.io/anon/pen/waooQB

最佳答案

在您的示例中，您从包含五个成员的列表中随机选择，并且可以显示三个单独的词，因此重叠的可能性相当高。

一个简单的解决方法是每次选择列表中的第一项，将其从列表中删除，然后追加到列表末尾。因为您在列表中的位置多于从中选择的项目，所以您保证永远不会发生冲突。

在所有实例之间共享相同的列表possiblePlaces。
将第一项移出队列，每次完成后将其推到队列末尾，而不是在 defineRandomPlace 中随机选择。

片段突出显示#2:

// shift a position off the front
self.currentPlace = possiblePlaces.shift();

self.element.css('top', self.currentPlace.top + 'px');
self.element.css('left', self.currentPlace.left + 'px');

// push it back on the end
possiblePlaces.push(self.currentPlace);

如果您希望它真正随机，您需要随机选择并从数组中删除一个项目，并且在使用之后才将其放回数组中。您还需要始终确保您拥有的 possiblePlaces 多于要放置在页面上的 dom 元素。

像这样:

Pulsate.prototype.defineRandomPlace = function() {
  var self = this;
  var newPlace = possiblePlaces.splice(Math.floor(Math.random()*possiblePlaces.length), 1)[0];

  if (self.currentPlace) {
    possiblePlaces.push(self.currentPlace);
  }

  self.currentPlace = newPlace;

  self.element.css('top', self.currentPlace.top + 'px');
  self.element.css('left', self.currentPlace.left + 'px');
};

参见 http://codepen.io/anon/pen/bdBBPE

关于javascript - 使单词跳动并随机改变位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30363522/

单词 javascript self possiblePlaces currentPlace jquery html

有关javascript - 使单词跳动并随机改变位置的更多相关文章

ruby-on-rails - 在 ruby 中使用 gsub 函数替换单词 - 2
我正在尝试用ruby中的gsub函数替换字符串中的某些单词，但有时效果很好，在某些情况下会出现此错误？这种格式有什么问题吗NoMethodError(undefinedmethod`gsub!'fornil:NilClass):模型.rbclassTest"replacethisID1",WAY=>"replacethisID2andID3",DELTA=>"replacethisID4"}end另一个模型.rbclassCheck 最佳答案啊，我找到了!gsub!是一个非常奇怪的方法。首先，它替换了字符串，所以它实际上修改了
华为OD机试用Python实现 -【明明的随机数】 2023Q1A - 2
华为OD机试题本篇题目：明明的随机数题目输入描述输出描述：示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od，od薪资待遇，od机试题清单华为OD机试真题大全，用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o
ruby - 正则表达式将非英文字母匹配为非单词字符 - 2
@raw_array[i]=~/[\W]/非常简单的正则表达式。当我用一些非拉丁字母(具体来说是俄语)尝试时，条件是错误的。我能用它做什么？最佳答案 @raw_array[i]=~/[\p{L}]/使用西里尔字符进行测试。引用:http://www.regular-expressions.info/unicode.html#prop 关于ruby-正则表达式将非英文字母匹配为非单词字符，我们在StackOverflow上找到一个类似的问题： https://
Python 刷Leetcode题库，顺带学英语单词（31） - 2
ValidPalindromeGivenastring,determineifitisapalindrome,consideringonlyalphanumericcharactersandignoringcases. [#125]Example:"Aman,aplan,acanal:Panama"isapalindrome."raceacar"isnotapalindrome.Haveyouconsiderthatthestringmightbeempty?Thisisagoodquestiontoaskduringaninterview.Forthepurposeofthisproblem
ruby - 正则表达式在哪个位置失败？ - 2
我需要一个非常简单的字符串验证器来显示第一个符号与所需格式不对应的位置。我想使用正则表达式，但在这种情况下，我必须找到与表达式相对应的字符串停止的位置，但我找不到可以做到这一点的方法。(这一定是一种相当简单的方法……也许没有？)例如，如果我有正则表达式:/^Q+E+R+$/带字符串:"QQQQEEE2ER"期望的结果应该是7 最佳答案一个想法:你可以做的是标记你的模式并用可选的嵌套捕获组编写它:^(Q+(E+(R+($)?)?)?)?然后你只需要计算你获得的捕获组的数量就可以知道正则表达式引擎在模式中停止的位置，你可以确定匹配结束
ruby - 改变替换的大小写 - 2
我有以下内容:text.gsub(/(lower)(upper)/,'\1\2')我可以将\2替换为大写吗？类似于:sed-e's/$abc$/\U\1/'这在Ruby中可行吗？最佳答案查看gsub文档:str.gsub(模式){|匹配|block}→new_str在block形式中，当前匹配字符串作为参数传入，$1、$2、$`、$&、$'等变量将被适当设置。block返回的值将替换为每次调用的匹配项。"alowerupperb".gsub(/(lower)(upper)/){|s|$1+""+$2.upcase}
ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
ruby - 下载位置 Selenium-webdriver Cucumber Chrome - 2
我将Cucumber与Ruby结合使用。通过Selenium-Webdriver在Chrome中运行测试时，我想将下载位置更改为测试文件夹而不是用户下载文件夹。我当前的chrome驱动程序是这样设置的:Capybara.default_driver=:seleniumCapybara.register_driver:seleniumdo|app|Capybara::Selenium::Driver.new(app,:browser=>:chrome,desired_capabilities:{'chromeOptions'=>{'args'=>%w{window-size=1920,1
ruby - Heroku production.log 文件位置 - 2
我想在heroku.com上查看我的应用程序日志的内容，所以我关注了thisexcellentadvice并拥有我所有的日志内容。但是我现在很想知道我的日志文件实际在哪里，因为“log/production.log”似乎是空的:C:\>herokuconsoleRubyconsoleforajpbrevx.heroku.com>>files=Dir.glob("*")=>["public","tmp","spec","Rakefile","doc","config.ru","app","config","lib","README","Gemfile.lock","vendor","sc
ruby - 在 Ruby 中查找多个正则表达式匹配的模式和位置 - 2
这应该是一个简单的问题，但我找不到任何相关信息。给定一个Ruby中的正则表达式，对于每个匹配项，我需要检索匹配的模式$1、$2，但我还需要匹配位置。我知道=~运算符为我提供了第一个匹配项的位置，而string.scan(/regex/)为我提供了所有匹配模式。如果可能，我需要在同一步骤中获得两个结果。最佳答案 MatchDatastring.scan(regex)do$1#Patternatfirstposition$2#Patternatsecondposition$~.offset(1)#Startingandendingpo

javascript - 使单词跳动并随机改变位置

有关javascript - 使单词跳动并随机改变位置的更多相关文章

随机推荐