我已经为我的网页写了小脚本。 这个想法是只改变句子的一部分。 代码是工作的，但我希望它有影响时，部分改变，如淡入/淡出。 我做不到我不知道为什么。 请帮帮我。
以下是指向该项目的活动链接:
https://word-change-js.glitch.me/
下面是代码js:
var positionSlider = {
positions: [
"java",
"php",
"net",
"python",
"sql",
"scala"],
losuj: function() {
const randomPosition = this.positions[Math.floor(Math.random() * this.positions.length)];
document.getElementById("pozycja").innerHTML = randomPosition;
}
};
positionSlider.losuj();
setInterval(function() {
positionSlider.losuj();
}, 2000);
下面是HTML代码:
<!DOCTYPE html>
<html lang="en">
<body>
<h1>Właśnie teraz realizujemy rekrutacje na stanowisko <span id="pozycja"></span></h1>
</body>
</html>
使用FadeIn()和FadeOut()放置效果。 下面是演示:
null
var positionSlider = {
positions: [
"java",
"php",
"net",
"python",
"sql",
"scala"
],
losuj: function() {
const randomPosition = this.positions[Math.floor(Math.random() * this.positions.length)];
$("#pozycja").fadeOut(1000)//fade out
document.getElementById("pozycja").innerHTML = randomPosition;
$("#pozycja").fadeIn(1000)//fade in
}
};
positionSlider.losuj();
setInterval(function() {
positionSlider.losuj();
}, 2000);span{
color:red
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<body>
<h1>Właśnie teraz realizujemy rekrutacje na stanowisko <span id="pozycja"></span></h1>
</body>
</html>
把完整的代码放在一个文件中，你可以复制粘贴，这是在chrome中工作的，希望你给你提供解决的线索-
<!DOCTYPE html>
<html lang="en">
<style>
.spanToFadeInAndOut {
width: 200px;
height: 200px;
-webkit-animation: fadeinout 4s linear forwards;
animation: fadeinout 4s linear forwards;
}
@-webkit-keyframes fadeinout {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeinout {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
<body>
<h1>Właśnie teraz realizujemy rekrutacje na stanowisko <span class="spanToFadeInAndOut" id="pozycja">Anks</span>
</h1>
<script>
var positionSlider = { positions: ['java', 'php', 'net', 'python', 'sql', 'scala'],
losuj: function () {
const randomPosition = this.positions[
Math.floor(Math.random() * this.positions.length)
];
// Removing old span from the DOM.
const oldSpan = document.querySelector('#pozycja');
const parentNode = oldSpan.parentNode;
parentNode.removeChild(oldSpan);
// Adding new span from the DOM.
const span = document.createElement('span');
span.setAttribute('id', 'pozycja');
span.setAttribute('class', 'spanToFadeInAndOut');
span.innerHTML = randomPosition;
parentNode.appendChild(span);
},
};
positionSlider.losuj();
setInterval(function () {
positionSlider.losuj();
}, 2000);
</script>
</body>
</html>
