zoukankan      html  css  js  c++  java
  • 滚动变色的文字js特效

    Js实现滚动变色的文字效果,在效果展示页面,可看到文字在交替变色显示,以吸引人的注意,效果真心不错哦,把代码拷贝到你的网站后,修改成想要的文字就OK了。

    查看效果:http://keleyi.com/a/bjad/bd55blos.htm

    以下是源代码:

     1 <html>
     2 <head>
     3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     4 <title>滚动变色的文字js特效-柯乐义</title>
     5 </head>
     6 <body>
     7 <div style="736px;">
     8 请注意下方的文字,部分文字染成红色,且红色循环移动。 <a href="http://keleyi.com/a/bjad/bd55blos.htm" target="_blank">原文</a>
     9 </div>
    10 <script type="text/javascript">
    11 var message="欢迎访问柯乐义网,这里有web前端等学习资料。"
    12 var neonbasecolor="#333333"
    13 var neontextcolor="#ff0000"
    14 var neontextcolor2 = "#ff3333"
    15 var flashspeed=100
    16 var flashingletters=8
    17 var flashingletters2=2
    18 var flashpause=0 
    19 var n=0
    20 if (document.all||document.getElementById){
    21 document.write('<font color="'+neonbasecolor+'">')
    22 for (m=0;m<message.length;m++)
    23 document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
    24 document.write('</font>')
    25 }
    26 else
    27 document.write(message)
    28 function crossref(number){
    29 var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
    30 return crossobj
    31 }
    32 function neon(){
    33 if (n==0){
    34 for (m=0;m<message.length;m++)
    35 crossref(m).style.color=neonbasecolor
    36 }
    37 crossref(n).style.color=neontextcolor
    38 if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2 
    39 if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor
    40 if (n<message.length-1)
    41 n++
    42 else{
    43 n=0
    44 clearInterval(flashing)
    45 setTimeout("beginneon()",flashpause)
    46 return
    47 }
    48 }
    49 function beginneon(){
    50 if (document.all||document.getElementById)
    51 flashing=setInterval("neon()",flashspeed)
    52 }
    53 beginneon()
    54 </script>
    55 
    56 <div><br /><a href="http://keleyi.com" target="_blank">keleyi.com</a></div>
    57 </body>
    58 </html>

    web前端:http://www.cnblogs.com/jihua/p/webfront.html

  • 相关阅读:
    学会数据库读写分离、分表分库
    MySql数据主从同步配置
    数据库事务的四大特性以及事务的隔离级别
    tensor维度变换
    本地存储,序列化与反序列化
    连连看项目实战之四(异步加载进度条)
    连连看项目实战之二(礼盒动画)
    连连看项目实战之三(解析配置表)
    连连看项目实战之一(搭建场景)
    设计模式(C#)——12责任链模式
  • 原文地址:https://www.cnblogs.com/jihua/p/gundongbianse.html
Copyright © 2011-2022 走看看