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:
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>