JavaScript文本循环变色效果

2018-8-20 00:10| 作者: admin| 查看: 270| 评论: 0|来自: 蚂蚁部落

本章节介绍一下如何实现一行文本实现一段文本内容能够滚动循环变色效果。

此效果可以有效的提高美观度,使用户的印象更加深刻,当然也就能够使网站更加能够留住用户。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<script type="text/javascript"> 
var message="蚂蚁部落欢迎您,只有努力奋斗才会有美好的未来"; 
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>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).var message="蚂蚁部落欢迎您,只有努力奋斗才会有美好的未来",在本例中使用的字符串。

(2).var baseColor="green",设置文字的最初颜色。

(3).var textColor="red",循环变化的颜色。

(4).var secondTextColor="blue",这个是变色文字后面跟着的两个文字的颜色。

(5).var speed=100,设置定时器的间隔时间。

(6).var letters=8,变色的文字个数。

(7).var secondLetters=2,跟在后面要变色的文字个数。

(8).var pause=0,延迟执行的时间。

(9).var count=0,声明一个变量,并赋初值为0,具体作用看下面介绍。

(10).var timer=null,定时器的返回值。

(11).for(m=0;m<message.length;m++){document.write('<span id="light'+m+'">'+message.charAt(m)+'</span>');},遍历每一个字符串,然后给每一个字符外面嵌套一个span元素,并设置span元素的id属性值。

(12).function $(id){return document.getElementById(id);},封装了一个类似于jquery的id选择器。

(13).function done(){},实现此效果的核心函数。

(14).if(count==0){

  for(var m=0;m<message.length;m++){

    $("light"+m).style.color=baseColor;

  }   

}

也就是刚加载代码执行,设置所有span元素的字体颜色,其实就是所有字符的字体颜色。

(15).$("light"+count).style.color=textColor,设置对应索引的span元素的字体颜色。

(16).if(count>letters-1){$("light"+(count-letters)).style.color=secondTextColor;} ,如果count的值大于letters-1,也就是从count等于letters开始,将变色的前一个字符的颜色设置为secondTextColor。

(17).if(count>(letters+secondLetters)-1){$("light"+(count-letters-secondLetters)).style.color=baseColor;},判断如果变蓝的个数超过secondLetters,那么就将超出的那个文本的颜色设置为baseColor。

(18).if(count<message.length-1){count++},如果count的值小于字符串字符的最大索引值,那么count加1。

(19).else{

    count=0

    clearInterval(timer)

    setTimeout("begindone()",pause)

    return

}

否则的话,将count重置为0,然后停止定时器函数的执行,并在指定的延迟时间之后再开始执行函数begindone()。

二.相关阅读:

(1).charAt()函数可以参阅JavaScript charAt()一章节。

(2).setTimeout()函数可以参阅setTimeout()一章节。 

(3).setInterval()函数可以参阅setInterval()一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部