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

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

以下是源代码：

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>滚动变色的文字js特效-柯乐义</title>

 </head>

 <body>

 <div style="width:736px;">

 请注意下方的文字，部分文字染成红色，且红色循环移动。 <a href="http://keleyi.com/a/bjad/bd55blos.htm" target="_blank">原文</a>

 </div>

 <script type="text/javascript">

 var message="欢迎访问柯乐义网，这里有web前端等学习资料。"

 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>

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

滚动变色的文字js特效的更多相关文章

  1. 带左右箭头切换的自动滚动图片JS特效

    效果图 按钮 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  2. 鼠标点击自定义文字展现特效JS代码

    JS特效使用方法 只需将如下JS代码放到</body>之前就好了 var a_idx = 0; jQuery(document).ready(function($) { $("b ...

  3. 150个JS特效脚本

    收集了其它一些不太方便归类的JS特效,共150个,供君查阅. 1. simplyScroll simplyScroll这个jQuery插件能够让任意一组元素产生滚动动画效果,可以是自动.手动滚动,水平 ...

  4. jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件

    插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转. ...

  5. 基于jQuery图片遮罩滑动文字切换特效

    基于jQuery图片遮罩滑动文字切换特效.这是一款jquery hover鼠标滑动选项卡切换透明背景遮罩文字显示特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  6. 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕（残缺）

    原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...

  7. js特效 15个小demo

    js特效和15个小demo 代码如下:images文件夹未上传 1.图片切换: <!DOCTYPE html> <html> <head> <title> ...

  8. 分享十个CSS3鼠标滑过文字动画特效

    介绍10组基于CSS3的鼠标滑过文字动画特效,有上凸.下凹等文字动画.这些炫酷的CSS3文字效果可以让网页变得更加绚丽.效果图如下: 在线预览   源码下载 实现的代码. html代码: <h2 ...

  9. <一>初探js特效魅力之全选不选反选04

    初探js特效魅力04 我们在进入到公司里面工作的时候,做一个同一个项目,经常是大家分工合作,当我们写css时,一般不写在行间,因为这样会被误操作,也就是被乱删了都不知道,这样的后果是很难检查的 ,因为 ...

随机推荐

  1. C#设计模式-建造者模式

    在软件系统中,有时需要创建一个复杂对象,并且这个复杂对象由其各部分子对象通过一定的步骤组合而成. 例如一个采购系统中,如果需要采购员去采购一批电脑时,在这个实际需求中,电脑就是一个复杂的对象,它是由C ...

  2. tomcat 的优化配置

    一.关于并发连接量的配置 在tomcat的server.xml配置文件中:将<Connector port="8080" protocol="HTTP/1.1&qu ...

  3. Spring学习记录(九)---通过工厂方法配置bean

    1. 使用静态工厂方法创建Bean,用到一个工厂类 例子:一个Car类,有brand和price属性. package com.guigu.spring.factory; public class C ...

  4. nodejs 批量修改、删除

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4AAAAQhCAIAAABDaAVHAAAgAElEQVR4nOydeXxU5aH359733vd9b/ ...

  5. 前端学PHP之变量

    × 目录 [1]变量定义 [2]关键字 [3]变量赋值[4]可变变量[5]变量函数 前面的话 变量是用于临时存储值的容器.这些值可以是数字.文本,或者复杂得多的排列组合.变量在任何编程语言中都居于核心 ...

  6. 深入理解javascript中的动态集合——NodeList、HTMLCollection和NamedNodeMap

    × 目录 [1]NodeList [2]HTMLCollection [3]NamedNodeMap[4]注意事项 前面的话 一说起动态集合,多数人可能都有所了解.但是,如果再深入些,有哪些动态集合, ...

  7. .NET平台开源项目速览(7)关于NoSQL数据库LiteDB的分页查询解决过程

    在文章:这些.NET开源项目你知道吗?让.NET开源来得更加猛烈些吧!(第二辑) 与 .NET平台开源项目速览(3)小巧轻量级NoSQL文件数据库LiteDB中,介绍了LiteDB的基本使用情况以及部 ...

  8. windows配置xhprof，PHP性能分析工具

    本来以为配置这么一个工具不会费很大的力气,后面发现完全不是. 一.小插曲 早上显示电脑不能显示虚拟目录下的所有域名,但是能打开localhost,数据库连接也不行了.这个问题纠缠了我一个上午.对了还有 ...

  9. JS详细入门教程（上）

    首先,我们看一下DOM级别和兼容性: 之前好像在某本上看到说DOM有0级,实际上,DOM0级标准是不存在的.DOM有1.2.3三个级别.DOM1级由两个模块组成(DOM Core和DOM HTML), ...

  10. jQuery.grep()

    什么是jQuery.grep()? jQuery.grep()是一个查找满足过滤函数的数组元素的函数.原始数组不受影响,返回值为数组. 用法介绍: 写法: jQuery.grep( array, fu ...