Js implementation of the scroll color text effect

  • 2020-03-30 03:19:56
  • OfStack

Js to achieve scrolling text effect, in the effect display page, you can see text in alternate color display, to attract people's attention, the effect is really good oh, the code copy to your site, modified into the text you want to be OK.

Here is the source code:
 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> Scroll the text to change color js The special effects </title> 
</head> 
<body> 
<div style="width:736px;"> 
 Please note the text below. Some text is dyed red and moves in a red cycle.  <a href="http://keleyi.com/a/bjad/bd55blos.htm" target="_blank"> The original </a> 
</div> 
<script type="text/javascript"> 
var message=" Welcome to krayi, here it is web Front end and other learning materials. " 
var neonbasecolor="#333333" 
var neontextcolor="#ff0000" 
var neontextcolor2 = "#ff3333" 
var flashspeed=100 
var flashingletters=8 
var flashingletters2=2 
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> 

<div><br /><a href="http://keleyi.com" target="_blank">keleyi.com</a></div> 
</body> 
</html> 

Related articles: