JS实现滚动变色的文字效果(交替变色/循环不断)

2013-08-18 03:23:08 -0700

此代码仅供参考

代码说明

JS实现滚动变色的文字效果，可看到文字在交替变色显示，吸引访客的注意，效果真心不错哦。代码中已有详细，请自行修改即可。

html代码

<script>
  var message="愿得一人心，白首不分离"
  var neonbasecolor="green"
//正常字体颜色
  var neontextcolor="yellow"
//最先出现的变动颜色
  var neontextcolor2="red"
//随后出现的变动颜色
  var flashspeed=120
//颜色变动的快慢，越小越快
  var flashingletters=3
//最先出现变动颜色的字数
  var flashingletters2=1
//随后出现变动颜色的字数
  var flashpause=0 
var n=0
  if (document.all||document.getElementById){
  document.write('<font color="'+neonbasecolor+'">')
  for (m=0;m<message.length;m++)
  document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
  document.write('</font>')
  }
  else
  document.write(message)
function crossref(number){
  var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
  return crossobj
  }
function neon(){
  if (n==0){
  for (m=0;m<message.length;m++)
  crossref(m).style.color=neonbasecolor
  }
  crossref(n).style.color=neontextcolor
if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2 
  if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor
if (n<message.length-1)
  n++
  else{
  n=0
  clearInterval(flashing)
  setTimeout("beginneon()",flashpause)
  return
  }
  }
function beginneon(){
  if (document.all||document.getElementById)
  flashing=setInterval("neon()",flashspeed)
  }
  beginneon()
</script>

代码演示

【本站仅供参考，版权归原作者所有】

«Newer Older»

Back to home

Subscribe | Register | Login | N