使用javascript和随机暂停/超时快速循环文本
Rapidly cycling text with javascript and random pauses / timeouts
我发现了一个非常好的效果,可以使用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>
等等
我能找到的唯一相关css是:
.aboutContainer .doin span {
display:none
}
.aboutContainer .doin span.active {
display:block
}
您可以用更少的代码获得相同的效果:
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
相关文章:
- 如何在下面的ES6循环中获得前面的文本
- 当选择值x时,Javascript需要在正确的位置显示文本区域,从而循环通过具有选择选项的表单
- 将循环中的两个文本框相乘,并在第三个文本框上显示结果
- 使用javascript和随机暂停/超时快速循环文本
- 文本淡入淡出后循环加载页面
- javascript:在for循环中使用settimeout来定期显示文本
- Javascript循环文本
- 停止循环播放文本,但仍运行效果
- 识别两个文本中的单词(if 语句在 for 循环中)
- 使用 jQuery 将 HTML 文本抓取到 JSON 中,但由于循环引用而无法字符串化
- 如何循环浏览页面源中的所有文本框元素并查找所有这些文本框的名称
- 正在加载“"循环,每3秒更改一次文本
- 如何访问所有子项并使用for循环逐个更改文本
- 当选择特定的单选框时,使用jquery禁用循环中的文本框
- 循环字符串以查找字符集之间的文本
- 将输入转换为循环中的文本
- 随时间在jquery中循环文本
- 需要一个带有循环文本的选框,鼠标悬停时停止
- 在Jquery中更改循环文本
- 循环文本框插入不在数组中的值文本框