我正在尝试为页面上的文本创建动画,每隔几秒钟,将一个单词与列表中的另一个单词进行更改。示例:我有一个标题,上面写着“这很酷”,但我希望每隔几秒钟将“酷”替换为“整洁/真棒/groovy/etc”。
老实说,我不确定解决这个问题的最佳方法(就使用什么技术而言),而且我找不到适用于现代浏览器的代码简介。非常感谢您的帮助!
我正在尝试为页面上的文本创建动画,每隔几秒钟,将一个单词与列表中的另一个单词进行更改。示例:我有一个标题,上面写着“这很酷”,但我希望每隔几秒钟将“酷”替换为“整洁/真棒/groovy/etc”。
老实说,我不确定解决这个问题的最佳方法(就使用什么技术而言),而且我找不到适用于现代浏览器的代码简介。非常感谢您的帮助!
在纯 JS
<script>
var words = ["neat", "great", "best", "groovy"];
var i = 0;
var text = "This is cool";
function _getChangedText() {
i = (i + 1) % words.length;
console.log(words[i]);
return text.replace(/cool/, words[i]);
}
function _changeText() {
var txt = _getChangedText();
console.log(txt);
$("#changer").text(txt);
}
setInterval("_changeText()", 1000);
</script>
<span id="changer">This is cool</span>
在jQuery中,我会做这样的事情:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() { // on document load
changer();
});
function changer() {
var words = ["nifty","groovy","far out"]; // add as many as you like
var idx = Math.floor(words.length * Math.random()); // randomizer
$('#change').text(words[idx]); // replaces the contents of "change"
var time = Math.floor(5000 * Math.random() + 3000); // in milliseconds
setTimeout(changer,time); // lather, rinse, repeat
}
</script>
...
<h2>This is <span id="change">cool</span></h2>
关键是使用带有 ID 的 SPAN 标签,您可以快速挑选出来。
这个问题已经很老了,但它出现在我的谷歌搜索中。在 2018 年,您可以使用 CSS 动画轻松实现此行为,而无需任何额外的 JavaScript 代码。
以下内容应为您提供所需的内容:
<!DOCTYPE html>
<html>
<head>
<style>
.animated{
display: inline;
text-indent: 8px;
}
.animated span{
animation: topToBottom 12.5s linear infinite 0s;
-ms-animation: topToBottom 12.5s linear infinite 0s;
-webkit-animation: topToBottom 12.5s linear infinite 0s;
color: red;
opacity: 0;
overflow: hidden;
position: absolute;
}
.animated span:nth-child(2){
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.animated span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.animated span:nth-child(4){
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.animated span:nth-child(5){
animation-delay: 10s;
-ms-animation-delay: 10s;
-webkit-animation-delay: 10s;
}
@-moz-keyframes topToBottom{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: translateY(-50px); }
10% { opacity: 1; -moz-transform: translateY(0px); }
25% { opacity: 1; -moz-transform: translateY(0px); }
30% { opacity: 0; -moz-transform: translateY(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-webkit-keyframes topToBottom{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: translateY(-50px); }
10% { opacity: 1; -webkit-transform: translateY(0px); }
25% { opacity: 1; -webkit-transform: translateY(0px); }
30% { opacity: 0; -webkit-transform: translateY(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-ms-keyframes topToBottom{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: translateY(-50px); }
10% { opacity: 1; -ms-transform: translateY(0px); }
25% { opacity: 1; -ms-transform: translateY(0px); }
30% { opacity: 0; -ms-transform: translateY(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
</style>
</head>
<body>
<h2>CSS Animations are
<div class="animated">
<span>cool.</span>
<span>neat.</span>
<span>awesome.</span>
<span>groovy.</span>
<span>magic.</span>
</div>
</h2>
</body>
</html>
请注意,这只是垂直滑动的示例。在动画/过渡方面,CSS 基本上有无限的可能性。