Question

我发现使用javascript闪烁单词的效果非常好，该javascript具有随机暂停，其中脚本停止在特定短语上运行，然后再次重新启动。可以在http://mmmatt.com/about

查看此效果

我看过这个网站的来源，但我似乎无法让javascript在我自己的网站上运行 - 我认为这是因为上面网站上的脚本是通过点击主页上的链接触发的 - 我只是希望脚本应用于<h1>元素并开始运行文档加载。我的javascript技能非常差，至少可以说允许我修改下面的js和html标记以获得此运行的任何帮助都将非常感激。

网站的js是：

/**
* Site!
*/
var Site = Site || { };

$(function() {
setTimeout(function() {
$(document).trigger('Matt');
}, 500);
});
/**
* About
*/
Site.About = function() {

self = {

$el : { },

data :{
  'count' : 0,
  'loop'  : null
},

cycle : function() {

  clearTimeout(self.data.loop);
  var shit = Math.floor(Math.random() * self.data.count);
  var timeout = Math.floor(Math.random() * 100) + 30;
  var chance = Math.floor(Math.random() * 30);
  self.$el.doin.find('.active').removeClass('active');
  self.$el.doin.find('span').eq(shit).addClass('active');

  if ( chance == 0 ) timeout = 1500;
  self.data.loop = setTimeout(self.cycle, timeout);

},

load : function() {
  clearTimeout(self.data.loop);
  setTimeout(function() {
      self.$el.doin = $('#project .doin');
      self.data.count = self.$el.doin.find('span').length;
      self.cycle();
  }, 1000);
},

unload : function() {
  clearTimeout(self.data.loop);
}

};

return {
load   : self.load,
unload : self.unload
}

}();

html是：

<div id="clone" class="project"></div>
<div id="project" class="project" data-section="about">

<div class="aboutContainer">
<div class="doin">
  Matthew Miller is<br/>
                <span class="active">walking in circles</span>
                  <span >trying too hard</span>
                  <span >not trying hard enough</span>
                  <span >dancing</span>
                  <span >making strange noises</span>
                  <span >eating a donut</span>
                  <span >moving extremely fast</span>
                  <span >sitting still</span>
                  <span >making dinner</span>
                  <span >naked</span>
                  <span >making cookies</span>
                  <span >in love</span>
                  <span >doing the same thing</span>
                  <span >disappointed in pablo</span>
                  <span >skateboarding with steven</span>
                  <span >walking millie</span>
                  <span >in his favorite place</span>
                  <span >still alive</span>
                  <span >drinking water</span>
                  <span >running around naked</span>
                  <span >drawing</span>
                  <span >sleeping</span>
                  <span >a doctor</span>
                  <span >telling the truth</span>

etc.etc。

我能找到的唯一相关的CSS是：

.aboutContainer .doin span {
display:none
}
.aboutContainer .doin span.active {
display:block
}

Answer 1

使用更少的代码可以获得相同的效果：

function display() {
  var el= document.querySelectorAll('.doin span'),
      rnd= Math.floor(Math.random() * el.length-1) + 1,
      rnd2= Math.round(Math.random()*20);

  document.querySelector('.doin span.active').className= '';
  el[rnd].className= 'active';
  if(rnd2===5) {
    setTimeout(display, 1500);
  } else {
    setTimeout(display, 100);
  }
} //display

Fiddle

使用javascript和随机暂停/超时快速循环文本

1 个答案: