介绍一下如何实现一行文本实现一段文本内容能够滚动循环变色效果。
此效果可以有效的提高美观度，使用户的印象更加深刻，当然也就能够使网站更加能够留住用户。
代码实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>学习前端</title>
<script type="text/javascript">
var message="web前端开发学习q群：731771211 详细教程讲解";
var baseColor="green";
var textColor="red";
var secondTextColor="blue";
var speed=100;
var letters=8;
var secondLetters=2;
var pause=0;
var count=0;
var timer=null;
for(m=0;m<message.length;m++){
document.write(‘<span id="light‘+m+‘">‘+message.charAt(m)+‘</span>‘);
}
function $(id){
return document.getElementById(id);
}
function done(){
if(count==0){
for(var m=0;m<message.length;m++){
$("light"+m).style.color=baseColor;
}
}
$("light"+count).style.color=textColor;
if(count>letters-1){
$("light"+(count-letters)).style.color=secondTextColor;
}
if(count>(letters+secondLetters)-1){
$("light"+(count-letters-secondLetters)).style.color=baseColor;
}
if(count<message.length-1){
count++
}
else{
count=0
clearInterval(timer)
setTimeout("begindone()",pause)
return
}
}
function begindone(){
timer=setInterval("done()",speed);
}
window.onload=function(){
begindone();
}
</script>
</head>
<body>
<div>
</div>
</body>
</html>
原文地址：https://blog.51cto.com/14284898/2385388
时间： 2024-10-10 14:14:56